Использовать отключение с формой на основе модели

Question

Я пытаюсь использовать disabled внутри моей модели управляемой формы. У меня есть следующая форма:

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

Я получаю сообщение об ошибке (не могу найти controls из this.form) наверное потому что я пользуюсь this.form внутри this.form,

Как я могу это исправить?

PS я тоже пытался добавить [disabled]='...' внутри моего HTML, но я получаю предупреждение о том, что вместо этого я должен использовать formBuilder

Answer 1

Да, вы правы, что проблема в том, что вы ссылаетесь на переменную (this.form) когда это еще не начато. К счастью, в вашем случае вам не нужно ссылаться на группу форм в вашем val2 контроль формы. Ваш код может быть переписан следующим образом:

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

Тем не менее, этот блок только инициирует disabled значение контроля val2 без контроля val1ControlДействительность Для этого вам нужно будет подписаться на 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