动态创建选择控制

-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

动态创建选择控制

回答

相关问题