选中复选框时，Angular react 形式禁用输入

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">

但是我在控制台中收到警告:

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true when you set up this control in your component class, the disabled attribute will actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

我不能用

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 的值发生变化时，您可以对模型执行任何您喜欢的操作。例如，您可以 reset()和 disable() FormControl，或检查是否满足某些条件。