Question

使用Angular的反应式表单我在服务器上从模式动态创建表单。对于UI我使用材料2。

在我的实际代码中，formGroup和控件是从架构创建的，但在下面的示例中，我只是为了简单而分配了一切，以避免任何时序问题。目前，我使用的是最新版本2.0.0 beta12。

在添加select组件之前，一切正常。当我创建一个＆＃39; select＆＃39;动态我收到模板解析错误：

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模板：

＆＃13;

<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>

＆＃13;

以下是我的视图组件的TypeScript：

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'}
      ]
    }
  }
 };
}

我不确定我是否理解错误。这个名字＆＃39;属性不应该是控件的显式@Input，而不仅仅是＆＃39;标题＆＃39;属性应该。

我已经查看了组件源，并且名称不是matInput上的@Input，但此代码适用于它。我已经看过大致相关的＆＃34;无法绑定到＆＃39; x＆＃39;因为它不是一个已知的属性＆＃39;＆＃39;＆＃34;＆＃34;但似乎没有一个适用于这里的名字＆＃39;属性不应该是@Input。

Answer 1

在这种情况下，我的主要错误是混合了Reactive Form语法和Template form语法。对于那些仍然像我一样学习Angular 2+的人来说，这很糟糕：）

我在formGenerator的前一次迭代中允许'name'的原因是ngModel允许使用name属性。一旦我添加'formControlName'反应语法，ngModel就会被其选择器忽略：

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

在我的模板中删除所有'ngModel'和'name'就可以了。所以它看起来像：

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

动态创建选择控件

1 个答案: