Angular4 中的自定义验证

Posted 2023-03-13

【中文标题】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 函数。您的代码不完整。我会根据你的需要更新我的帖子。