对模型驱动表单使用禁用

Question

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

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

我收到一个错误(找不到this.form的controls )，可能是因为我在this.form中使用了this.form。

我怎么才能修复它呢？

PS我也尝试在我的html中添加[disabled]='...'，但是我得到一个警告，说我应该使用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}]
});

但是，此块仅启动 val2 control 的disabled值，而不监控 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