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

Question

我正在开发一个与 Angular 中的表单一起使用的自定义组件。我正在实现 ControlValueAccessor 接口(interface)，它运行良好。

但是，如果没有 required 验证器(它是一个 CAPTCHA)，我的组件没有理由被使用，因此组件的所有调用都必须指定 required 验证器。

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

---

澄清。考虑这个例子:

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

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

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

上面所有的 MyCaptcha 组件调用都必须使用 required 属性，以便将 required 验证器应用于表单控件。

是否可以在不显式指定 required 属性的情况下调用我的自定义 Controller ，但仍然对其应用了验证器？像这样:

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

Answer 1

all invocations of the component will have to specify required validator

这引发了使用抽象类并扩展它的想法。

因此，将必需的验证器嵌入到所有表单组件的方法可能是这样的:

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 验证器嵌入到包含需要表单的所有组件待验证。

希望对您有所帮助或至少有用!让我知道事情的后续!

干杯!