使用模型驱动形式的禁用

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没有监视val1Control有效性的情况下启动val2控制的值.为此,您需要订阅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