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 您的组件类，实际上将设置disabled属性你的DOM。我们建议使用这种方法来避免'改变检查'错误后。

我无法使用

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

因为toggleControl尚不可访问。

有什么想法吗？感谢

Answer 1

您可以订阅FormControl的valueChanges方法省略的observable：

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的值发生变化时，您可以对模型做任何您喜欢的事情。您可以同时使用FormControl reset()和disable()，或检查是否符合某些条件。

选中复选框时，角度反应形式禁用输入

1 个答案: