选中复选框时，角反应式表单将禁用输入

Question

我有一个复选框和输入。我想做的是在选中复选框时禁用输入，而在取消选中复选框时启用输入。

这是我的表单组：

this.workingTime = this.fb.group({
  toggle: false, // this is the checkbox
  from: [{ value: null, disabled: false }],
  to: [{ value: null, disabled: false }]
});
get toggleControl() { return this.workingTime.get('toggle'); }

我确信这会起作用：

<input [disabled]="toggleControl.value">

但是我在控制台收到警告：

看来您正在使用带有反应形式指令的Disabled属性。如果在组件类中设置此控件时将Disabled设置为true，则实际上将在DOM中为您设置disabled属性。我们建议使用这种方法来避免“检查后更改”错误。

我不能用

from: [{ value: null, disabled: this.toggleControl.value }]

因为toggleControl尚不可用。

有任何想法吗？谢谢

Answer 1

您可以订阅FormControl的valueChanges方法忽略的可观察对象：

this.workingTime.get('toggle').valueChanges.subscribe(v => {
  if (v) {
    this.workingTime.get('from').disable()
    this.workingTime.get('to').disable()
  } else {
    this.workingTime.get('from').enable()
    this.workingTime.get('to').enable()
  }
}

您将必须在代码中找到适当的位置以启动订阅。这样，当切换FormControl的值更改时，您可以对模型执行任何操作。例如reset()，您可以同时disable()使用FormControl，或者检查是否满足某些条件。