Angular 6模板驱动表单添加带条件的自定义验证

我正在

angular 6

中使用

模板驱动表单

我为标识号字段添加了一个名为

identityNumberValidator

的

自定义验证

，用于检查用户键入的标识号（IL-identity）是否正确

验证指令如下所示：

@Directive({
    selector: '[identityNumberValidator]',
    providers: [
        {
            provide: NG_VALIDATORS,
            useExisting: IdentityNumberValidator,
            multi: true
        }
    ]
})
export class IdentityNumberValidator implements Validator {
    validator: ValidatorFn;

    constructor() {
        this.validator = this.identityNumberValidator();
    }

    validate(c: FormControl) {
        return this.validator(c);
    }


    identityNumberValidator(): ValidatorFn {
        return (c: FormControl) => {
            let isValid = true;
            if (c.value && c.value.length >= 9) {
                let idNum = c.value.padStart(9, '0');
                // CHECK THE ID NUMBER algoritm - http://halemo.net/info/idcard/
                let mone = 0;
                for (let i = 0; i < 9; i++) {
                    var incNum = idNum[i];
                    incNum *= (i % 2) + 1;
                    if (incNum > 9)
                        incNum -= 9;
                    mone += incNum;
                }
                if (mone % 10 !== 0) {
                    isValid = false;
                }
                else {
                    isValid = true;
                }
            }

            if (isValid == true) {
                return null;
            } else {
                return {
                    identityNumberValidator: {
                        valid: false
                    }
                };
            }
        }
    }

@指令({
选择器：“[identityNumberValidator]”，
供应商：[
{
提供：NG_验证器，
useExisting:IdentityNumber验证程序，
多：真的
}
]
})
导出类IdentityNumber验证程序实现验证程序{
验证器：验证器fn；
构造函数（）{
this.validator=this.identityNumberValidator（）；
}
验证（c:FormControl）{
返回此验证程序（c）；
}
IdentityNumber验证器（）：验证器fn{
返回（c:FormControl）=>{
让isValid=true；
如果（c.value&&c.value.length>=9）{
设idNum=c.value.padStart（9，'0'）；
//检查ID号算法-http://halemo.net/info/idcard/
设mone=0；
for（设i=0；i<9；i++）{
var incNum=idNum[i]；
incNum*=（i%2）+1；
如果（incNum>9）
incNum-=9；
mone+=incNum；
}
如果（货币%10！==0）{
isValid=false；
}
否则{
isValid=true；
}
}
if（isValid==true）{
返回null；
}否则{
返回{
IdentityNumber验证程序：{
有效：假
}
};
}
}
}

我在我的组件中使用它作为输入元素：

<mat-form-field appearance="outline">
            <mat-label>מספר מזהה</mat-label>
            <input matInput
                   maxlength="9"
                   minlength="9"
                   required
                   identityNumberValidator
                   #identityNumberField="ngModel"
                   [(ngModel)]="identityNumber"
                   name="identityNumberField" />
            <mat-error *ngIf="identityNumberField.errors?.required">
              {{ eMessages.required}}
            </mat-error>
            <mat-error *ngIf="identityNumberField.errors?.minlength">
              יש להזין 9 ספרות
            </mat-error>
            <mat-error *ngIf="identityNumberField.errors?.identityNumberValidator">
              מספר זהות שגוי
            </mat-error>
          </mat-form-field>

מספר מזהה
{{eMessages.required}
יש להזין 9 ספרות
מספר זהות שגוי

我的问题是如何在其他元素的条件下使用此验证

我尝试了

[identityNumberValidator]=“元素==1？”：null”

但不起作用。我读了这篇文章

但是[attr.identityNumberValidator]和[class.identityNumberValidator]都不起作用。验证根本不出现

我知道我可以用反应式，但我不想

因此，我可以使用两个不同的输入元素，并在它们之间使用*ngIf，但我想找到一个解决方案，只使用一个元素

---

有什么想法吗？

您可以用模板驱动的方法绑定自定义函数，但这可以通过@rxweb/反应式表单验证器实现

在这里，我在输入字段中使用了

[compose]

属性，在该字段中我已传递了validator方法并设置了条件表达式。请参见下面的代码：

[compose]="{validators:[identityNumberValidator.bind(this)],'conditionalExpression':'x => x.userName == \'Bharat\''}"

这是完整的HTML。我定义了两个控件“userName”和“firstName”，一旦“userName”控件值为“Bharat”，就会触发firstName验证。 请参阅下面的HTML代码片段。

用户名
名字
提交

您可以使用模板驱动的方法绑定自定义函数，但这可以通过@rxweb/reactive form validators实现

在这里，我在输入字段中使用了

[compose]

属性，在该字段中我已传递了validator方法并设置了条件表达式。请参见下面的代码：

[compose]="{validators:[identityNumberValidator.bind(this)],'conditionalExpression':'x => x.userName == \'Bharat\''}"

这是完整的HTML。我定义了两个控件“userName”和“firstName”，一旦“userName”控件值为“Bharat”，就会触发firstName验证。 请参阅下面的HTML代码片段。

用户名
名字
提交

您可以添加验证程序代码吗？请阅读一些示例

寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现问题所需的最短代码

：请提供一个。至于您的问题，请至少提供一些代码，以了解您是否遵循了（如果没有，则遵循）另一个使用指令验证模板驱动表单的示例。它只是生成一个实现验证器的指令，它有一个提供程序

提供程序：[{provide:NG_VALIDATORS，useExisting:RepeatNameDirective，multi:true}]

并使用

@Input

获取论据嗨，我添加了示例代码。您可以添加验证程序代码吗？请阅读一些示例

问题以寻求调试帮助（“此代码为什么不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现问题所需的最短代码

：请提供一个。至于您的问题，请至少提供一些代码，以了解您是否遵循了（如果没有，则遵循）另一个使用指令验证模板驱动表单的示例。它只是生成一个实现验证器的指令，它有一个提供程序

提供程序：[{provide:NG_VALIDATORS，useExisting:RepeatNameDirective，multi:true}]

并使用

@Input

获取参数。我添加了示例代码