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> 

簡単ですが、私はngFormModelを使用してselectを作成する方法のための任意の例を見つけることができない、それらはすべてngModelとngValue財産でoptionタグを作成*ngForループを使用しているようです。それでngFormModelとngModelを混ぜなければならないのですか、それともngFormModelだけでこれを行う方法がありますか？

Answer 1

あなたはこの方法を選択してとngModelを使用せずにngFormControlを使用することができます。

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

ここ成分の含有量である：https://plnkr.co/edit/2UItcrQQWr6eowsPoE4i?p=preview：

@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を参照してください。