angular - 对模型驱动表单使用禁用

Question

我正在尝试使用disabled我的模型驱动表单内部。我有以下表格：

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

我收到错误（未找到controlsof this.form）可能是因为我在使用this.forminside 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}]
});

但是，此块仅启动disabledval2 控制的值，而不监控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();
  }
});

这是工作的 plunker：http ://plnkr.co/edit/kEoX2hN9UcY4yNS3B5NF