如何使用ngFormModel將元素列表綁定到選擇列表？

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> 

，但我無法找到如何創建select使用ngFormModel任何的例子，他們似乎都使用ngModel和*ngFor環路以ngValue屬性創建option標籤。這是否意味着我必須混合ngFormModel和ngModel，或者有沒有辦法單獨使用ngFormModel？

Answer 1

可以使用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'); 
    } 
} 

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