Angular：ControlValueAccessor -> 在父级上调用 clearValidators() 导致子级的验证方法未被调用答案

【问题标题】：Angular: ControlValueAccessor -> call to clearValidators() on parent causes child's validate method not being calledAngular：ControlValueAccessor -> 在父级上调用 clearValidators() 导致子级的验证方法未被调用
【发布时间】：2021-08-02 05:15:34
【问题描述】：

我使用 ControlValueAccessor 已经有一段时间了，最近我遇到了一个我找不到解决方法的问题。

我创建了一些内部有 FormGroup 的组件（使用 ControlValueAccessor），并应用了一些特殊验证。

在父组件上，我对子组件（ControlValueAccessor 组件）是否需要有一些逻辑。

为了设置所需的验证器，我执行以下操作：

        if(isRequired){
            this.form.controls.get('mycustomcontrol').clearValidators();
            this.form.controls.get('mycustomcontrol').setValidators(Validators.required);
        }else{
            this.form.controls.get('mycustomcontrol').clearValidators();
        }

当我这样做时，我的孩子的 'validate' 方法停止被 angular 调用，因此不再运行我的组件自定义验证逻辑。

有谁知道这是否可以防止或告诉 angular 继续调用子组件上的验证的方法？

我创建了一个示例 stackblitz 来展示： https://stackblitz.com/edit/angular-custom-reactive-forms-b4jztm?

谢谢！

【问题讨论】：

你为什么要清除验证器？
@WillAlexander 我正在清除，因为该逻辑与另一个组件（复选框）相关。每当用户更改值时，它应该设置组件是否需要。

标签： angular angular-reactive-forms

【解决方案1】：

当您在父表单控件上调用 clearValidators 时，它也会清除子控件上的验证器，这就是不再调用自定义组件的验证器的原因。

解决此问题的方法是在调用 clearValidators 后在自定义组件上设置验证器：

    // Get the current validators of the todo control
    const todoValidators = this.mainGroup.get('todo').validator;
    // Clear all validators
    this.mainGroup.clearValidators();
    // Sets back the validator of the todo control
    this.mainGroup.get('todo').setValidators(todoValidators);

stackblitz

【讨论】：

那太好了！但是有没有办法在组件上设置和删除所需的验证器？添加所需的验证器似乎很容易，但我找不到以后只删除所需的方法（同时保留其余的）
不，不幸的是，不可能删除单个验证器。 setValidators 方法将所有验证器合并到一个函数 control.validator。所以删除验证器的唯一方法是调用 setValidator 方法来设置除您要删除的验证器之外的所有验证器。