Question

我正在开发一个与Angular中的表单一起使用的自定义组件。我正在实施ControlValueAccessor界面，效果很好。

但是，我的组件没有理由在没有required验证器（它是验证码）的情况下使用，因此组件的所有调用都必须指定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验证程序嵌入到包含需要验证的表单的所有组件中

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

干杯！

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

1 个答案: