将禁用与模型驱动形式一起使用

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 控件的 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();
  }
});

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

将禁用与模型驱动形式一起使用

Use disable with model-driven form

angular

angular2-forms

angular2-formbuilder