Angular 如何使用ngFormModel将元素列表绑定到选择列表？

假设我有一个表单组件，比如

export class FormComponent {
    form: ControlGroup;
    categories: AbstractControl;
    text: AbstractControl;
    private _categories: string[] = [ 'One', 'Two', 'Three' ];
    constructor(private _formBuilder: FormBuilder) {
        this.form = _formBuilder.group({
       'categories': [ this._categories ],
       'text': [ '', Validators.compose([ Validators.required, Validators.minLength(1) ]) ] 
    });
    this.categories= this.form.controls['categories'];
    this.text = this.form.controls['text'];
}

在我看来，我想要一个用于

类别

的下拉菜单和一个用于

文本

的文本区域。文本区域很简单

<form role="form" [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)">
    <div class="form-group" [class.error]="!text.valid && text.touched">
        <textarea class="form-control" id="text" rows="5" placeholder="Text goes here" 
            [ngFormControl]="text"></textarea>
        <div *ngIf="!text.valid && text.touched" class="ui error message">
            Please enter some text.
        </div>
    </div>
</form>

请输入一些文本。

---

但是我找不到任何例子来说明如何使用

ngFormModel

创建

select

，它们似乎都使用

ngModel

和

*ngFor

循环来创建带有

ngValue

属性的

选项

标记。这是否意味着我必须混合使用

ngFormModel

和

ngModel

，或者是否有办法单独使用

ngFormModel

来实现这一点？

您可以使用

ngFormControl

选择此方式，而不使用

ngModel

：

<form [ngFormModel]="form">
  <div>
    <select test [ngFormControl]="form.controls.categories">
      <option *ngFor="#category of categories;#i=index" [value]="category.value">{{i}} - {{category.name}}</option>
    </select>
    categories : {{form.controls.categories.value}}
  </div>
</form>
<div (click)="updateValues()">Update values</div>

---

请参阅以下内容：。

我有一个疑问：是否要将选择与多个选择一起使用？这将是下一步，是的。事实上，它不支持开箱即用。您需要为此实现自定义值访问器。。。

@Component({
  (...)
})
export class App {
  constructor(private builder:FormBuilder) {
    this.categories = [
      { name: 'Cat1', value: 'cat1' },
      { name: 'Cat2', value: 'cat2' },
      { name: 'Cat3', value: 'cat3' },
      { name: 'Cat4', value: 'cat4' }
    ];
    this.form = builder.group({
      categories: [ 'cat1' ]
    });
  }

  updateValues() {
    this.form.controls.categories.updateValue('cat3');
  }
}