Angularの* ngForを使用してformControlNamesを設定するには？

Question

配列内のオブジェクトに対して*ngForを使用してフォームコントロールを設定しようとしています。ユーザーによっては、Arrayに1つのオブジェクトがありますが、他の倍数のオブジェクトがあることがあります。

私の問題は、コンポーネント内でフォームグループバリデーターを設定する方法がわかりませんが、ループを使用してformControlNameを作成することです。以下のように設定すると、1つのオブジェクトしか存在しない場合、存在しない他のformControlNameを探している間、フォームは無効のままになります。

だから、名前の最初のオブジェクトの場合：「日数」はリストにない、「日数」はまだthis.formになるとコントロールに表示します：

アレイ：

indicators = [ 
    {name:"Days",data:[250,1]}, 
    {name:"Multiply Average",data:[3,.25,1]} 
], 

コンポーネント：

ngOnInit() { 
    this.form = this._fb.group({ 
      "Multiply Average":['', Validators.compose([ 
       Validators.required 
       ])], 
      "Days":['', Validators.compose([ 
       Validators.required 
       ])], 
     }); 
    }; 

温度後半：

<span 
    *ngFor="let i of indicators"> 
      {{i.name}}: 
      <md-slider 
      formControlName={{i.name}} 
      color="primary" 
      [max]=i.data[0] 
      [thumb-label]="true" 
      [step]=i.data[1] 
      [min]=i.data[2]> 
      </md-slider> 
    </span> 

すべてのヘルプは

Answer 1

を結合それより詳細な使用特性にする

は、条件付きの検証です。選択に応じて、必要なバリデータを設定するか、削除する必要があります。これはここでは、いくつかのフィールド、より多くのバリデーションなどを持っている場合、私はあなたにアイデアを与えるための非常に簡単な例です："How to implement conditional validation in Angular model-driven forms"

フォームコントロールを介して反復のサンプルがありますよりダイナミックですが、考え方は以下のとおりです。

ユーザーがmd-selectで選択を行ったときに変更イベントを設定できます。あなたはもちろんvalueChangesを使用することができますが、私は、単純な変更イベントを好き：

<md-select 
    formControlName="indicator1" 
    (change)="checkValue(form.get('indicator1'))"> 
    <md-option 
     *ngFor="let indicator of indicators['indicatorlist']" 
     [value]="indicator"> 
     {{indicator}} 
    </md-option> 
</md-select> 

我々は場合に除去されなければならないバリデータその値と比較できるように、我々はそれはdoesnのフォームコントロールを渡しますこの場合、バリデーターを削除するには、値がAbove WMA - Volume Price以外のものであることを確認してください。私たちは、設定/解除のバリデータを、私たちもここでupdateValueAndValidity()を使用する必要があります。あなたも、単に使用できる代わりにsetValidators(null)の

checkValue(ctrl) { 
    if(ctrl.value != "Above WMA - Volume Price") { 
    this.form.get('Multiply Average').setValidators(null); 
    this.form.get('Multiply Average').updateValueAndValidity(); 
    } else { 
    this.form.get('Multiply Average').setValidators(Validators.required); 
    this.form.get('Multiply Average').updateValueAndValidity(); 
    } 
} 

をclearValidators()

は、すでに述べたように、これは単に与えるために非常に粗製のサンプルですあなたのアイデア。

ドロップダウンからAbove WMA - Volume Price以外を選択すると、そのフォームコントロールに名前がMultiply Averageではないにもかかわらず、フォームが有効と見なされます（他のフィールドが有効な場合）。

DEMO：返信用https://plnkr.co/edit/h4nQfg1VYykaGgfNfnWk?p=preview

Answer 2

はあなたのformタグに[formGroup]="form"を持っていることを確認してください素晴らしいことです。また、あなたが必要なものの代わりに、補間formControlName以上の属性

[formControlName]="i.name"