将预定义的验证器添加到 Angular 中的自定义组件

Question

我正在开发一个自定义组件，用于 Angular 中的表单。我正在实现ControlValueAccessor 接口，效果很好。

但是，我的组件没有理由在没有 required 验证器的情况下使用（它是一个 CAPTCHA），因此组件的所有调用都必须指定 required 验证器。

是否有可能以某种方式将此验证器直接嵌入到我的组件中，以便在与ngModel 和表单（基于模板和反应式）一起使用时始终应用到它？

---

澄清。考虑这个例子：

<my-captcha [(ngModel)]="firstCaptcha" required></my-captcha>

<my-captcha [(ngModel)]="secondCaptcha" required></my-captcha>

<my-captcha [(ngModel)]="thirdCaptcha" required></my-captcha>

上面所有对MyCaptcha 组件的调用都必须使用required 属性才能将所需的验证器应用于表单控件。

是否可以在不明确指定required 属性的情况下调用我的自定义控制器，但仍然应用了验证器？像这样：

<my-captcha [(ngModel)]="captchaValue"></my-captcha>

Answer 1

组件的所有调用都必须指定必需 验证器

这引发了使用 abstract class 和 extend 的想法。

因此，将required 验证器嵌入到您的所有表单组件的方式可能是这样的：

export abstract class FormValidationClass implements ControlValueAccessor {
     // Implement your validation methods for your standard form including required validator

    protected formModel:<any>;        

    protected constructor() {
    }

    public requiredValidatorMethod() { 
        // Do stuff here with formModel, for example 
    }
}

而且，您实际创建的组件将有一个表单：

export class UserFilter extends FormValidationClass implements OnInit {

      protected formModel:<any>;

      this.requiredValidatorMethod (this.formModel);
}

因此，只要您的类声明 protected formModel 和 extends FormValidationClass，您就可以使用 FormValidationClass 中的方法，并且不必每次都为每个具有表单的组件添加特定的逻辑。

这将是我将逻辑嵌入到所有包含表单的组件的方式，在这种情况下，将required 验证器嵌入到包含需要验证的表单的所有组件中。

希望它有所帮助，或者至少有用！让我知道事情的后续！

干杯！