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

Posted 2023-02-22

【中文标题】将预定义的验证器添加到 Angular 中的自定义组件

【英文标题】：Add predefined validator to a custom component in Angular

【发布时间】：2017-10-10 08:22:02

【问题描述】：

我正在开发一个自定义组件，用于 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>

【问题讨论】：

抱歉，我有点不专心，但是，必需的验证器是什么意思？你的意思是required 属性？

是的，我的意思是必须提供组件的值，否则视为无效。 Angular 在基于模板的表单中使用 required 属性解决了这个问题。

我目前处于类似情况。是否可以选择使用反应形式？到目前为止，我发现的所有可能有帮助的东西都是用响应式表单完成的

我认为解决方案应该在响应式表单和模板表单之间交叉兼容。

【参考方案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.io/docs/ts/latest/cookbook/… 在代码中进行验证，不需要required 属性（他保留它是为了样式目的）。

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