1

次のようなフォームコンポーネントがあるとしましょう

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しかし、 usingを作成する方法の例が見つかりませんngFormModel。それらはすべて使用しているようで、プロパティを使用してタグを作成ngModelする*ngForループです。それは私が混合しなければならないということですか、またはこれを単独で行う方法はありますか?optionngValuengFormModelngModelngFormModel

4

1 に答える 1

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。

于 2016-04-29T10:18:59.850 に答える