Angular2フォームデータバインド値を持つコンポーネントのコントロールを無効にする

Question

ユーザーが編集モードでないときにコントロールを無効にしています。

this.theForm = this.builder.group({ 
    name: [{ value: this.model.name, disabled: !this.isEditMode}, Validators.required], 
}) 

編集モードに変更すると、コントロールが有効になります。しかし、これが設定されると、コンポーネントの値が変更されても変更されないように見えます。

これは、私は、マークアップでこれを持っていたときに働いていた：

<input [disabled]="!isEditMode" type="text" formControlName="name" /> 

これは私がformControlとそれを扱うことが示唆された実行時の警告が発生していました。

これは警告です：あなたが反応型 ディレクティブでdisabled属性を使用しているように見えます

。このコントロールを コンポーネントクラスに設定したときにdisabledをtrueに設定した場合、disabled属性は実際にはDOMの に設定されます。この方法を使用して、「変更後に 変更しました」というエラーを避けることをおすすめします。

コントロールをセットアップするときにこの値をバインドする方法はありますか？ コントロールをループして、変更するたびにこれを切り替える必要がありますか？

Answer 1

あなたは、（私の頭の上から）このような何かをコントロールチェンジを購読し、そこにそれを更新することができます

ngOnInit() { 
    for (let nut of this.userSettings.nutrientData) { 
     this.foodSettingsForm.controls[nut.abbr].valueChanges 
      .subscribe(v => { 
       this.completeValueChange(nut.abbr, v, (mode=="edit" ? false : true)); 
     }); 
    } 
} 

completeValueChange(field: string, value: boolean, disable: boolean) { 
    this.myForm.controls[myField] 
     .setValue(({value: vale, disabled: disable}, { onlySelf: true }); 
}