Angular2リフォーム - 無効にフォームコントロールを動的条件

Question

からは私が条件に基づいて動的に無効にする選択制御を持っている：

this.activityForm = this.formBuilder.group({ 
    docType: [{ value: '2', disabled: this.activeCategory != 'document' }, Validators.required] 
}); 

はしかし、DOCTYPEはこのいくつかの点でていても有効になりません。 .activeCategoryは 'document'になります。

これを修正するにはどうすればよいですか？

Answer 1

（多分それはまたFormControlだ？）、私は次のようなアプローチを提案します：

あなたは以下のように、this.activeCategoryが変化したときを検出するために(change)を使用することができます：

1 - あなたはngModelを使用している場合：

<input type="text" [(ngModel)]="activeCategory" (change)="checkValue($event)"> 

2 - それはFormControlだ場合：

<input type="text" formControlName="activeCategory" (change)="checkValue($event)"> 

ので、コンポーネントに、あなたはdisable/enable方法を使用してdocType制御操作することができます：

checkValue(event: Event) { 
    const ctrl = this.activityForm.get('docType'); 

    if (event.value === 'document') { 
    ctrl.enable(); 
    } else { 
    ctrl.disable(); 
    } 
} 

Answer 2

他のHTML要素とは異なる選択要素を処理する必要があります。 this.activeCategoryが変更されたときにリセットを実行する必要があります。このような

何か：もちろん

this.activityForm.controls['docType'].reset({ value: '2', disabled: false });

、あなたはおそらくかなりハードコード'2'よりも、現在の値を使用したいと思うでしょう。

これが必要な場合は、無効にするのと同じようなことが起こります（おそらくそうなります）。 NGフォームコントロールresetに

this.activityForm.controls['docType'].reset({ value: '2', disabled: true });

詳細情報。私はあなたがactiveCategoryを操作しているのか分からないので