web-dev-qa-db-ja.com

モデル駆動型フォームで無効化を使用

モデル駆動型フォーム内でdisabledを使用しようとしています。次のフォームがあります。

this.form = this.formBuilder.group({
    val1: ['', Validators.required],
    val2: [{value:'', disabled:this.form.controls.val1.valid}]
});

this.form内でthis.formを使用しているためと思われます（this.formのcontrolsが見つかりません）。

どうすれば修正できますか？

PS htmlに[disabled]='...'を追加しようとしましたが、代わりにformBuilderを使用する必要があるという警告が表示されます

angularangular2-formsangular2-formbuilder
20
ncohen

まだ開始されていないときに変数（this.form）を参照しているために問題があるのは確かです。幸いなことに、あなたの場合、val2フォームコントロールでフォームグループを参照する必要はありません。コードは次のように書き換えることができます。

let val1Control = this.formBuilder.control('', Validators.required);
this.form = this.formBuilder.group({
    val1: val1Control ,
    val2: [{value:'', disabled: val1Control.valid}]
});

ただし、このブロックはval1Controlの有効性を監視せずに、val2コントロールのdisabled値のみを開始します。そのためには、val1Control.statusChangesをサブスクライブする必要があります。

let val1Control = this.formBuilder.control('', Validators.required);
let val2Control = this.formBuilder.control({value:'', disabled: !val1Control.valid});
this.form = this.formBuilder.group({
  val1: val1Control,
  val2: val2Control
})

val1Control.statusChanges.subscribe((newStatus) => {
  if (val1Control.valid) {
    val2Control.enable();
  } else {
    val2Control.disable();
  }
});

動作するプランカーは次のとおりです。 http://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF

40
Harry Ninh