时间戳

首页 > 解决方案 > 带有动态/更新参数的 Angular 7 自定义验证

angular - 带有动态/更新参数的 Angular 7 自定义验证

问题描述

我正在使用带有材料设计组件的 Angular 7

我需要将 requireMatch 验证添加到 mat-autocomplete。

我已经使用参数创建了自定义验证，但参数值确实会动态变化。

下面是我的组件代码。

this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});

////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}

我面临的问题是我总是在accessCodes里面变空（init） requireMatch。

的更改this.accessCodeList不会反映给验证者。

更改后的含义this.accessCodeList不会在requireMatch验证器中获得更新的数组。

所以有人知道如何在自定义验证器中传递动态参数吗？

标签： angularangular-reactive-formsangular-validationangular-validator

解决方案

当您像这样调用它时需要绑定验证函数，否则验证器函数将不会绑定输入 accessList

[Validators.required, this.requireMatch(this.accessCodeList).bind(this)]

此外，如果您想限制该字段中的某些单词，您可以在此处查看我的 npm 包之一https://www.npmjs.com/package/ng4-validation

推荐阅读