如何使用 ngFormModel 将元素列表绑定到 select 列表？

Question

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

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

在我看来，我想要 categories 的下拉菜单和 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 循环创建option 个带有 ngValue 属性的标签。这是否意味着我必须混合使用 ngFormModel 和 ngModel 或者有没有办法单独使用 ngFormModel 来做到这一点？

Answer 1

您可以通过这种方式将 ngFormControl 与 select 一起使用，而无需使用 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');
  }
}

看到这个 plunkr：https://plnkr.co/edit/2UItcrQQWr6eowsPoE4i?p=preview。

如何使用 ngFormModel 将元素列表绑定到 select 列表？

How do I bind a list of elements to a select list using ngFormModel?

angular

angular2-forms

angular2-formbuilder