Angular Reactive Forms：从自定义组件中获取验证器答案

【问题标题】：Angular Ractive Forms: get validators from custom componentAngular Reactive Forms：从自定义组件中获取验证器
【发布时间】：2020-02-20 11:07:45
【问题描述】：

我有一个自定义输入组件，只是普通 html input 标签的封面。这是一个使用示例：

  <form [formGroup]="formGroup">
    <my-input [title]="Some title" formControlName="name"></my-input>
  </form>

相关组件包含：

  formGroup: FormGroup = new FormGroup({
    name: new FormControl('', Validators.required),
  });

我设法使用this approach 从my-input 组件中访问FormControl 实例，现在我想做的是在需要时为my-input 标题添加一个星号。

问题是 - 是否可以访问验证器列表以便我可以区分 required 验证器？

附：当然，我可以将required 属性放在元素本身上

<my-input ... required></my-input>

但我想使用反应形式。

【问题讨论】：

使用NG_VALIDATORS
你为什么不在<my-input [title]="Some title" [setRequired]="true" formControlName="name"></my-input> 中设置另一个属性并使用@Input() setRequired: boolean 进入孩子。在html中<span *ngIf="setRequired">*</span>
@varman 我只是不想将验证器从组件类移动到模板，我觉得将逻辑保留在类中更合理
您是否实施了ControlValueAccessor 以在孩子身上使用formControlName？
@varman 我确实做到了，不过，我认为这对案件没有任何影响

标签： angular forms validation

【解决方案1】：

你可以这样做

<span "formGroup.controls['name'].errors?.required>*</span>

【讨论】：

如果用户在输入中输入内容，这将隐藏星号，这在用户体验方面不是预期的行为和不好的做法。不过感谢您的建议。

【解决方案2】：

同样的问题现在在 github 中打开了一段时间（所以看起来你大多不走运）。

https://github.com/angular/angular/issues/13461

你可以看到像下面这样的解决方案（感谢来自 github 的 mtinner），但没有任何官方的

  export const hasRequiredField = (abstractControl: AbstractControl): boolean => {
    if (abstractControl.validator) {
        const validator = abstractControl.validator({}as AbstractControl);
        if (validator && validator.required) {
            return true;
        }
    }
    if (abstractControl['controls']) {
        for (const controlName in abstractControl['controls']) {
            if (abstractControl['controls'][controlName]) {
                if (hasRequiredField(abstractControl['controls'][controlName])) {
                    return true;
                }
            }
        }
    }
    return false;
};

您会发现大多数人都在尝试解决与您相同的问题。

希望这会有所帮助！

【讨论】：

Athanasios，谢谢你的建议。没看到问题！