正文 

当前位置： 首页 > 源码 >

Angular4 中的自定义验证

     2023-03-13     272

关键词：

【中文标题】Angular4 中的自定义验证【英文标题】：Custom validation in Angular4 【发布时间】：2018-07-29 18:52:21 【问题描述】：

在我的页面中，我有一个简单的表单组。我必须在其中为名称编写自定义验证。

this.searchForm = this._formBuilder.group(

        profileName: new FormControl('', Validators.compose([Validators.required])),
        TypeId: new FormControl('', Validators.compose([Validators.required])),
        tempRange: new FormControl('', Validators.compose([Validators.required])),
        region: new FormControl('', Validators.compose([Validators.required])),
        quarter1: new FormControl('', Validators.compose([Validators.required])),
        quarter2: new FormControl('', Validators.compose([Validators.required]))

    , 
            validator: this.customValidator// your validation method
        );

我已将自定义验证放入方法 this.customValidator 中。

我的一项验证是检查 profileName 的重复检查。

我在从验证方法获取同一类型脚本类中的其他方法（验证逻辑所在的位置）时遇到问题，当我调用该方法（不是静态或函数）时，我收到错误消息（按 f12)

ERROR 错误：未捕获（承诺）：TypeError： this.validateProfileName 不是函数...'。

有什么方法可以调用特定的方法，或者我需要在它自己的验证方法中实现所有逻辑。

另外，如何以与必填字段验证错误消息相同的样式显示验证错误消息。

我的验证方法

customValidator(control: AbstractControl) 
    debugger;
    let profileName = control.get('profileName').value;
    let retgionCode = control.get('regionCode').value;
    let forcastType = control.get('forecastTypeId');
    var status = this.validateProfileName(retgionCode, profileName);

    if (!status)
    control.get("profileName").setErrors( 'invalidProfileName': true );

    return null;

【问题讨论】：

如果您不向我们展示您的代码，没有人会知道您的代码中的错误是什么；) 我已经添加了方法和确切的错误。谢谢 【参考方案1】：

问题在于this。正如您现在所拥有的那样，您正在失去this 的范围。在您的自定义验证器中，this 不是指向您的组件范围，而是指向函数范围。并且函数范围内没有validateProfileName，因此 Angular 会给出正确的错误。

要保留this 的上下文，绑定它：

validator: this.customValidator.bind(this)

现在您可以访问自定义验证器之外的范围。

【讨论】：

您好，感谢您的评论，请确认我需要在哪里调用绑定？我打电话给验证器的地方是同一个地方吗？【参考方案2】：

看起来你做的工作比你需要做的多，而且你没有在自定义验证器中调用函数。这就是你想要的：

this.searchForm = this._formBuilder.group(
    profileName: ['', Validators.required],
    TypeId: ['', Validators.required],
    tempRange: ['', Validators.required],
    region: ['', Validators.required],
    quarter1: ['', Validators.required],
    quarter2: ['', Validators.required]
,  validator: this.customValidator() );

然后在你的验证函数中，你需要这样做：

customValidator() 
    debugger;
    let profileName = this.searchForm.get('profileName').value;
    let retgionCode = this.searchForm.get('regionCode').value;
    let forcastType = this.searchForm.get('forecastTypeId');
    let status = this.validateProfileName(retgionCode, profileName);

    if (!status) 
        this.searchForm.get("profileName").setErrors( 'invalidProfileName': true );
        return null;

【讨论】：

感谢您的评论，但我无法按照您的建议调用验证方法，我已经更新了我的帖子，也添加了验证方法。在其中我必须提供一个参数抽象控制，并且即使在调用中没有“（）”，该方法也会命中。 如果你调用一个需要参数的函数，但你没有提供一个参数，你将在 100% 的情况下抛出错误。当然你可以在没有 () 的情况下调用你的函数，但在这种情况下你需要，但是你的函数需要一个 AbstractControl。 如果我注释掉“var status = this.validateProfileName(retgionCode, profileName);”从该方法来看，调试器没有任何错误，我正在从调用验证的地方获取特定的 AbstractControl。我也在调试时获得了配置文件名称和区域代码。 控件将是未定义的，除非您将某些内容传递给 customValidation 函数。您的代码不完整。我会根据你的需要更新我的帖子。

Angular 4：未执行 <router-outlet> 中的自定义属性指令

】Angular4：未执行<router-outlet>中的自定义属性指令【英文标题】：Angular4:CustomAttributeDirectivewithin<router-outlet>notbeingexecuted【发布时间】：2017-12-1514:57:19【问题描述】：我目前正在尝试使用基于组件的路由为我的Angular4(v4.2.6... 查看详情

模板中的自定义表单验证错误

】模板中的自定义表单验证错误【英文标题】：customformvalidationerrorsintemplate【发布时间】：2020-07-2513:40:12【问题描述】：如何在模板中传递自定义表单验证错误？forms.pydefclean_username(self):inputusername=self.cleaned_data[\'username\']iflen(inpu... 查看详情

Laravel Spark 中的自定义验证消息

】LaravelSpark中的自定义验证消息【英文标题】：CustomValidationMessageinLaravelSpark【发布时间】：2019-11-0120:45:54【问题描述】：需要更改LaravelSpark中的验证消息，我在注册表单中添加新字段但需要更改显示的消息。普通的Laravel我可以... 查看详情

Django admin 中的自定义验证

】Djangoadmin中的自定义验证【英文标题】：CustomvalidationinDjangoadmin【发布时间】：2014-09-0805:57:32【问题描述】：我有一个非常简单的Django应用程序来记录我同事的讲座。由于它非常初级，我正在使用Django管理器本身。这是我的model... 查看详情

Grails 中的自定义验证器中的异常

】Grails中的自定义验证器中的异常【英文标题】：ExceptionincustomvalidatorinGrails【发布时间】：2012-09-2315:37:30【问题描述】：我正在尝试在Grais中对通过spring安全核心插件创建的User域实体实施密码验证。我在我的实体中添加了以下... 查看详情

Laravel 5 中的自定义验证器

】Laravel5中的自定义验证器【英文标题】：CustomvalidatorinLaravel5【发布时间】：2015-04-0916:14:51【问题描述】：我正在将我的Laravel应用程序从4升级到5。但是，我有一个无法使用的自定义验证器。在L4中，我创建了一个validators.php文... 查看详情

mongoose 5.7.0 中的自定义验证

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

Worklight 混合应用程序中的自定义证书验证

】Worklight混合应用程序中的自定义证书验证【英文标题】：CustomCertificateValidationinWorklightHybridApps【发布时间】：2015-11-3008:00:22【问题描述】：我正在尝试在Worklight应用程序中进行一些自定义证书验证。这意味着我想根据我拥有的... 查看详情

Kong API 网关中的自定义身份验证服务

】KongAPI网关中的自定义身份验证服务【英文标题】：CustomAuthenticationServiceinKongAPIGateway【发布时间】：2018-01-1901:20:06【问题描述】：我们目前正在为我们的微服务分析API网关，而Kong是可能的候选者之一。我们发现Kong支持多个身... 查看详情

将当前字段的值传递给 Laravel 中的自定义验证函数

】将当前字段的值传递给Laravel中的自定义验证函数【英文标题】：PassingthevalueofcurrentfieldtocustomvalidationfunctioninLaravel【发布时间】：2022-01-1717:20:29【问题描述】：我想将当前字段的值传递给我的Laravel项目的Request类中的自定义验... 查看详情

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

】将预定义的验证器添加到Angular中的自定义组件【英文标题】：AddpredefinedvalidatortoacustomcomponentinAngular【发布时间】：2017-10-1008:22:02【问题描述】：我正在开发一个自定义组件，用于Angular中的表单。我正在实现ControlValueAccessor接... 查看详情

WCF 服务中的自定义证书验证

】WCF服务中的自定义证书验证【英文标题】：CustomcertificatevalidationinWCFservice【发布时间】：2010-12-0607:19:34【问题描述】：我想在我的WCF服务中检查客户端证书。我的目标是只允许具有特定指纹证书的客户端能够与我的服务进行通... 查看详情

Angular 5 动态表单中的自定义验证器

】Angular5动态表单中的自定义验证器【英文标题】：CustomvalidatorinAngular5dynamicforms【发布时间】：2018-05-2810:54:18【问题描述】：我正在从Angular5中的可配置json创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。... 查看详情

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

】如何根据Angular2中的自定义验证规则显示错误消息？【英文标题】：HowtodisplayerrormessagebasedoncustomvalidationrulesinAngular2?【发布时间】：2016-11-2817:59:35【问题描述】：我正在使用模板驱动的方法在Angular2中构建表单，并且我已经成... 查看详情

Mongoose 模型中的自定义实例或静态方法中的验证错误

】Mongoose模型中的自定义实例或静态方法中的验证错误【英文标题】：ValidationerrorsincustominstanceorstaticmethodsinaMongoosemodel【发布时间】：2014-09-1110:54:03【问题描述】：我有一个带有Meeting和Participants数组的基本Mongoose模型：varMeetingSch... 查看详情

JWT 身份验证不适用于 Django 中的自定义控制器

】JWT身份验证不适用于Django中的自定义控制器【英文标题】：JWTauthenticationdoesn\'tworkforcustomcontrollerinDjango【发布时间】：2015-08-2802:12:30【问题描述】：我在我的Python应用程序中使用DjangoRestFramework，并使用JSONWeb令牌身份验证(DRFJWT)... 查看详情

如何使用验证“唯一”访问 Laravel 中的自定义文本框名称？

】如何使用验证“唯一”访问Laravel中的自定义文本框名称？【英文标题】：HowaccesscustomtextboxnameinLaravelusingvalidation\'unique\'?【发布时间】：2014-12-2602:07:41【问题描述】：我有一个简单的问题。在我的表单中，我正在创建一个验证... 查看详情

sklearn 交叉验证中的自定义评分功能

】sklearn交叉验证中的自定义评分功能【英文标题】：CustomScoringFunctioninsklearnCrossValidate【发布时间】：2019-06-0117:19:51【问题描述】：我想为cross_validate使用一个自定义函数，它使用特定的y_test来计算精度，这是一个不同于实际目... 查看详情