正文 

当前位置： 首页 > 问答 >

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

     2023-02-22     32

关键词：

【中文标题】将预定义的验证器添加到 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 符号。但他们仍然必须参考它。

验证不会传播到 Angular 中的自定义表单控件 ng-select

】验证不会传播到Angular中的自定义表单控件ng-select【英文标题】：ValidationisnotpropagatetoCustomFormControlng-selectinAngular【发布时间】：2020-06-1223:43:55【问题描述】：我在Angular9应用程序中使用带有自定义表单控件的反应式表单。我用... 查看详情

如何根据 Angular 2 中的自定义验证规则显示错误消息？

...表单，并且我已经成功创建了可以在模板中使用的自定义验证器。但是，我找不到显示绑定到特定错误的特定错误消息的方法。我想区分为什么表格 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

Angular2 - 使用旧数据的自定义验证器

】Angular2-使用旧数据的自定义验证器【英文标题】：Angular2-Customvalidatorusingolddata【发布时间】：2017-06-2823:18:28【问题描述】：我编写的自定义验证器有问题。验证器用于验证组件中的所有数据。设置如下：组件显示一个包含X行... 查看详情

Angular4 中的自定义验证

】Angular4中的自定义验证【英文标题】：CustomvalidationinAngular4【发布时间】：2018-07-2918:52:21【问题描述】：在我的页面中，我有一个简单的表单组。我必须在其中为名称编写自定义验证。this.searchForm=this._formBuilder.group(profileName:newF... 查看详情

如何将控制事件添加到 RxCocoa 中的自定义按钮？

】如何将控制事件添加到RxCocoa中的自定义按钮？【英文标题】：HowdoIaddacontroleventtoacustombuttoninRxCocoa?【发布时间】：2019-06-1307:08:29【问题描述】：如何将.tap方法添加到自定义按钮，即。&lt;myCustomButton&gt;.rx.tap在RxSwift/RxCocoa... 查看详情

Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误

】Angular2/Material-应用到父FormGroup的自定义验证器未显示md错误【英文标题】：Angular2/Material-md-errornotdisplayedwithcustomvalidatorappliedtoparentFormGroup【发布时间】：2018-03-0200:01:12【问题描述】：我在使用Angular(v4.3.6)在模型驱动表单上显示... 查看详情

将标签和图像动态添加到 Android 中的自定义视图

】将标签和图像动态添加到Android中的自定义视图【英文标题】：AddingLabelsandimagesdynamicallytoacustomviewinAndroid【发布时间】：2014-03-1917:05:15【问题描述】：我有一个customview，用于捕获Android上的用户签名。view工作正常，我得到了我... 查看详情

根据 WooCommerce 中的自定义字段值将文本添加到订单摘要

】根据WooCommerce中的自定义字段值将文本添加到订单摘要【英文标题】：AddtexttoordersummarybasedonacustomfieldvalueinWooCommerce【发布时间】：2018-02-0423:50:51【问题描述】：我已成功向我的WooCommerce结帐页面添加了一个自定义字段，该字段... 查看详情

IOS：将viewcontroller添加到ios中的自定义TabBar

】IOS：将viewcontroller添加到ios中的自定义TabBar【英文标题】：IOS:AddingviewcontrollertocustomTabBarinios【发布时间】：2016-02-0505:07:51【问题描述】：我正在处理一个聊天项目，我必须在其中使用UITabBar。我在这个项目中使用故事板，但根... 查看详情

如何将子视图添加到情节提要中的自定义 UITableViewCell

】如何将子视图添加到情节提要中的自定义UITableViewCell【英文标题】：HowtoaddsubviewstoacustomUITableViewCellinastoryboard【发布时间】：2013-10-1718:51:19【问题描述】：在Xcode4中，您曾经能够将子视图添加到情节提要中动态UITableViewCell原型... 查看详情

angular 2+ 中的自定义输入类型

】angular2+中的自定义输入类型【英文标题】：Custominputtypesinangular2+【发布时间】：2018-06-1123:07:33【问题描述】：我想为我的Angular2项目使用自定义输入类型（即）&lt;inputtype=\'dob\'&gt;创建自定义验证。我在堆栈溢出中看到了... 查看详情

Laravel Spark 中的自定义验证消息

...述】：需要更改LaravelSpark中的验证消息，我在注册表单中添加新字段但需要更改显示的消息。普通的Laravel我可以将规则和自定义消息传递给验证功能，但不确定我在Spark中如何做。Spark::validateUsersWith(funct 查看详情

mongoose 5.7.0 中的自定义验证

】mongoose5.7.0中的自定义验证【英文标题】：Customvalidationsinmongoose5.7.0【发布时间】：2020-01-1907:32:05【问题描述】：以前我使用的是旧版本的mongoose，即4.3.7，并且自定义模式验证作为预保存挂钩运行良好。我所要做的就是将错误... 查看详情

无法将 IDFA 列表添加到 iAd Workbench 中的自定义细分 - 我的受众

】无法将IDFA列表添加到iAdWorkbench中的自定义细分-我的受众【英文标题】：Can\'taddIDFAlisttocustomsegmentiniAdWorkbench-Myaudiences【发布时间】：2016-04-2608:50:54【问题描述】：我无法使用IDFA文件列表创建自定义受众。当我上传包含用户IDFA... 查看详情

如何将样式应用于 Angular 中的自定义组件内容？

】如何将样式应用于Angular中的自定义组件内容？【英文标题】：HowtoapplyStyletocustomcomponentcontentinAngular?【发布时间】：2019-11-0303:12:02【问题描述】：我正在尝试将样式应用于自定义组件的子组件。选择器：<custom-component-example>... 查看详情

CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4

】CORSPreflight请求-标头中的自定义身份验证令牌-Spring和Angular4【英文标题】：CORSPreflightrequest-Customauthtokeninheader-SpringandAngular4【发布时间】：2018-04-2323:07:42【问题描述】：我在本地服务器上使用令牌作为标头请求简单GET时遇到问... 查看详情

无法将内容添加到 IB 视图控制器中的自定义表格视图单元格

】无法将内容添加到IB视图控制器中的自定义表格视图单元格【英文标题】：can\'taddcontenttocustomtableviewcellinviewcontrollerinIB【发布时间】：2014-01-0922:52:31【问题描述】：我想在UITableView中自定义一个原型单元格，它是UIViewController的... 查看详情