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

我正在开发一个自定义组件，以便与Angular中的窗体一起使用。我正在实施ControlValueAccessor接口，它工作得很好。将预定义的验证程序添加到Angular的自定义组件中

但是，我的组件没有理由不使用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>

来源

2017-05-11 Slava Fomin II

对不起，我有点不专心，但是，你是什么意思*需要验证器*？你的意思是'required'属性？ – SrAxi

是的，我的意思是组件的价值必须提供，否则它被认为是无效的。 Angular在基于模板的表单中通过'required'属性解决了这个问题。 –

我目前处于类似的情况。这是使用反应形式的选项吗？到目前为止我发现的一切可能有助于完成反应形式 – Arikael

组件的所有调用都会有指定要求验证

这引发使用的想法，并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，你将能够使用内012的方法，并避免每次为每个具有表单的组件添加特定的逻辑。

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

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

干杯！

来源

2017-05-11 11:25:25 SrAxi

谢谢你花时间写出答案，但是，我认为你错误地理解了我的问题。我已经澄清了一点。我所说的不是重复使用组件来定义另一个组件，而是将验证器添加到组件本身，而不是它的调用。通过调用，我的意思是它是模板中的单一用法。 –

对，我想我明白了。看看这个：https：//angular.io/docs/ts/latest/cookbook/form-validation.html#!#component-template使代码和属性'required'中的验证不需要*（他保留它为造型目的）*。 – SrAxi

关于你的链接，他们没有在自定义组件中封装验证器，他们只是将它从基于模板的形式中的'required'属性移动到反应形式中的'Validators.required'符号。但他们仍然必须参考它。 –

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

回答

相关问题