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

发布时间：2020-12-17 18:06:09 所属栏目：安全来源：网络整理

导读：我正在开发一个与Angular中的表单一起使用的自定义组件.我正在实现ControlValueAccessor接口,它工作得很好. 但是,我的组件没有理由在没有必需的验证器(它是CAPTCHA)的情况下使用,因此组件的所有调用都必须指定所需的验证器. 是否有可能以某种方式将此验证器

我正在开发一个与Angular中的表单一起使用的自定义组件.我正在实现ControlValueAccessor接口,它工作得很好.

但是,我的组件没有理由在没有必需的验证器(它是CAPTCHA)的情况下使用,因此组件的所有调用都必须指定所需的验证器.

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

澄清.考虑这个例子：

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

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

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

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

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

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

解决方法

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);
}

因此,只要您的类声明受保护的formModel并扩展FormValidationClass,您就可以使用FormValidationClass中的方法,并避免每次为具有表单的每个组件添加特定逻辑.

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

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

干杯!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!