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

Я пытаюсь использовать 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


angular angular2-forms angular2-formbuilder
person ncohen    schedule 24.09.2016    source источник
comment
Эй, разве это не должно быть val1: fb.control('', Validators.required), и вы также должны изменить val 2?   -  person Ced    schedule 25.09.2016
comment
@Ced, вы можете прочитать это: scotch.io/tutorials/   -  person ncohen    schedule 25.09.2016
comment
это говорит то, что я сказал, хотя. Не знаю, если я не в курсе. Проверьте мой ответ, если он совсем не то, что вы хотели, я его удалю   -  person Ced    schedule 25.09.2016

Ответы (1)


arrow_upward
51
arrow_downward

Да, вы правы, проблема в том, что вы ссылаетесь на переменную (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

person Harry Ninh    schedule 25.09.2016
comment
ОЙ, это очень многословно... Я не ожидал, что disabled будет таким сложным! Во всяком случае, это лучшее решение, я думаю! Спасибо - person ncohen; 25.09.2016
comment
Прекрасный! Сэкономил мое время. - person steady_daddy; 22.01.2017
comment
Мне очень помогли, большое спасибо! В моем случае (и если вы хотите отключить каждое поле формы) this.form.disable(); работало отлично! - person Maxime Lafarie; 15.06.2017
comment
как добавить несколько валидаторов в этом случае? с разделителями-запятыми или в массиве? - person Aravin; 22.09.2020