选中复选框时角反应窗体禁用输入
选中复选框时角反应窗体禁用输入
提问于 2018-05-16 11:19:17
我有一个复选框和输入。我要做的是在选中复选框时禁用输入，并在未选中复选框时启用输入。
这是我的表单组：
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">但我在控制台里收到警告：
看起来，您使用的是带有反应性表单指令的禁用属性。如果在组件类中设置此控件时，将禁用属性设置为true，则禁用属性实际上将在DOM中为您设置。我们建议使用这种方法来避免“检查后更改”错误。
我不能用
from: [{ value: null, disabled: this.toggleControl.value }]因为toggleControl还不能访问。
有什么想法吗？谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-16 12:01:11
您可以订阅可观察到的valueChanges方法省略的FormControl：
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，或者检查是否满足某些条件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50369523
复制相关文章
相似问题
腾讯云开发者
