时间戳

首页 > 解决方案 > Angular Ractive Forms：从自定义组件中获取验证器

angular - Angular Ractive Forms：从自定义组件中获取验证器

问题描述

我有一个自定义输入组件，只是常规 htmlinput标记的封面。这是一个使用示例：

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

相关组件包含：

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

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

问题是 - 是否可以访问验证器列表以便我可以区分required它们之间的验证器？

PS当然我可以将required属性放在元素本身

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

但我想使用反应形式。

标签： angularformsvalidation

解决方案

现在在 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;
};

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

希望这可以帮助！

推荐阅读