如何使用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。