動態創建選擇控制

-1

採用了棱角分明的反應形式，我動態創建從我的服務器架構形式。對於UI我使用的材料2.動態創建選擇控制

在我實際的代碼formGroup和控制從模式創建的，但在我下面的例子只是分配家居簡單並避免時序問題。目前，我正在使用最新版本2.0.0 beta12。

一切工作正常，直到我增加了選擇的組件。當我創建了一個「選擇」動態我收到一個模板解析錯誤：

Can't bind to 'name' since it isn't a known property of 'mat-select'.

Here is a stripped down example of things working fine with basic inputs.

Here is the same example switched to contain a 'select' control in the form generator.這引發錯誤。

這裏是HTML模板：

<form> 
 
    
 
    <div *ngFor="let control of controls;" 
 
    [ngSwitch]="schema.properties[control].element"> 
 
    
 
    <mat-form-field *ngSwitchCase="'select'"> 
 
     
 
     <mat-select 
 
     [formControlName]="control" 
 
     [(ngModel)]="formValues[control]" 
 
     [title]="control" [name]="control" 
 
     [placeholder]="schema.properties[control].title"> 
 
     
 
     <mat-option *ngFor="let option of schema.properties[control].options" [value]="option.value"> 
 
      {{option.viewValue}} 
 
     </mat-option> 
 
     </mat-select> 
 
    </mat-form-field> 
 

 
    </div> 
 
    <p> Selected value: {{formValues.select}} </p> 
 
</form>

這裏是打字稿我的視圖組件：

import {Component} from '@angular/core'; 
import {FormGroup, FormControl} from '@angular/forms'; 

@Component({ 
    selector: 'select-form-example', 
    templateUrl: 'select-form-example.html', 
}) 
export class SelectFormExample { 
    selectedValue: string; 

formRoot : FormGroup = new FormGroup({ 
    select: new FormControl(null) 
}) 

formValues : any = {}; 

controls: any = [ 
    'select' 
]; 

schema: any = { 
    properties: { 

    select: { 
     title: 'This is the display title', 
     element: 'select', 
     options: [ 
     {value: 'steak-0', viewValue: 'Steak'}, 
     {value: 'pizza-1', viewValue: 'Pizza'}, 
     {value: 'tacos-2', viewValue: 'Tacos'} 
     ] 
    } 
    } 
}; 
}

我不知道我理解錯誤。 'name'屬性不應該只是'title'屬性應該是控件的顯式@Input。

我看了組件的源和名稱是不是matInput的@input，但此代碼的工作吧。我已經看過粗略相關的「不能綁定到'x'，因爲它不是'y'的已知屬性，但沒有一個似乎適用於這裏，因爲'name'屬性不需要是@Input 。

來源

2017-10-11 Roy Reiss

您需要發佈您的代碼或標記在這裏，而不是第三方網站可以改變或消失幫助對未來沒有一個：[MCVE] – Rob

對不起！我也會在這裏添加代碼。我認爲鏈接到工作示例更有幫助。我的錯。 –

在這種情況下，我的主要錯誤是混合反應形式語法和模板形式的語法。對於那些仍然像我學習Angular 2+，這是不好的:)

我的formGenerator的前迭代允許的原因'名稱'是允許允許name屬性。當我加入了「formControlName」反應語法ngModel按照其選擇被忽略了：

'[ngModel]:not([formControlName]):not([formControl])'

在我的模板擺脫所有的「ngModel」和'名字的的的伎倆。所以它看起來像：

 <mat-select 
     [formControlName]="control" 
     [title]="control" 
     [placeholder]="schema.properties[control].title">

來源

2017-10-12 15:20:45

動態創建選擇控制

回答

相關問題