某些角度反应式表单元素不会对 formcontrol 禁用状态更改做出反应答案

【问题标题】：Certain angular reactive form elements won't react to formcontrol disabled state changes某些角度反应式表单元素不会对 formcontrol 禁用状态更改做出反应
【发布时间】：2021-07-27 21:10:43
【问题描述】：

我有以下问题：

我在我的一个角度组件中定义了一个 Angular FormGroup，其中有几个 FormControl-s，使用 Angular Material 显示。每改变一个特定的输入值，我就重置这个表单，创建一个新的 FormGroup 实例，并将它分配给同一个变量，方式如下：

this.sampleForm = this.formBuilder.group({
            'samplePropertyName': new FormControl(
                { value: this.dataVo.samplePropertyName, disabled: !this.isEditable() },
 [...]
        },
            { updateOn: 'blur' }
        );

这部分工作得很好。可见字段都会更新为正确的新值。但是，禁用状态并非如此。每个不是基本输入字段而是来自 Angular Material 的唯一字段类型（例如 mat-select 或 mat-datepicker）的字段都无法正确更新其禁用状态。

我尝试启用和禁用 formGroup 本身，但没有成功。调用 changeDetectorRef 也不起作用。唯一的解决方案是不分配新的表单实例，而是一个一个地更新现有的表单控件？我真的希望不是这样，因为这个表单有很多字段。

【问题讨论】：

您是否尝试过在每个 formControl 上手动调用 disable() 和 enable() 方法，而不是在 FormControl 构造函数中设置它？这样组件应该捕获事件...如果它不起作用，请尝试在 setTimeout(() => xxx, 0) 中调用它们以使其异步？
我自己尝试过禁用和启用，但没有用。但是，它与 setTimeout 一起使用。但是，由于字段众多，这不是一个理想的解决方案，也因为我很困惑为什么它会以这种方式工作，而不是通过预期的方式。
你能不能考虑一下，把所有要禁用的字段做成一个formgroup，然后作为formArray传递，一次性禁用整个formGroup。比如：this.mainFormGroup.get('newFormArrayControl').disable();

标签： angular reactive

【解决方案1】：

我对上面 Random 的建议进行了微调，我在 0 秒的长时间超时内启用和禁用了表单本身。它以这种方式工作，并且从视图调用的子组件都没有抛出错误。

我将使用它作为临时解决方案，因为我不确定它为什么作为异步调用工作。

【讨论】：

作为反馈，我想说这不是临时解决方案，而是解决方案。每次您只想更新现有 FormGroup 的状态时，创建一个新的 FormGroup 有什么意义？这就是为什么FormGroup 声明像disable() 这样的方法。
公平点，我的困惑主要是因为如果我不通过超时调用它，它就不起作用。
超时是为了确保孩子一步一步地走。如果你不使用超时，孩子还没有收到新的 FormGroup，所以它不会看到disable 调用。使用超时，孩子将收到新的 FormGroup，然后，disable() 函数将被调用，所以孩子会看到它。
感谢您的解释！现在我明白了。