Question

我正在template driven form中使用angular 6。

我为身份编号字段添加了一个名为custom validation的{{1}}，用于检查用户是否输入了正确的身份编号（IL身份）

验证指令如下所示：

identityNumberValidator

我在这里将其用于输入元素：

@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
                    }
                };
            }
        }
    }

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

我尝试了<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> 但不起作用。我读了这篇文章 Angular conditional validation on template driven form

，但[attr.identityNumberValidator]和[class.identityNumberValidator]均无效。验证根本不会出现。

我知道我可以使用反应形式，但我不想这么做。

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

有什么想法吗？

Answer 1

您可以使用模板驱动的方法来绑定自定义函数，但是可以通过@ rxweb / reactive-form-validators进行绑定。

在这里，我在通过验证器方法并设置条件表达式的输入字段上使用了[compose]属性。请参见下面的代码：

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

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

    <div>
      <form #userinfoForm = "ngForm" [rxwebForm]="userinfoForm" [model]="userinfo">
         <div class="form-group">
          <label>User Name</label>
    	    <input type="text" name="userName" [(ngModel)]="userinfo.userName"  class="form-control" />
    
    	  
        </div>
        <div class="form-group">
          <label>First Name</label>
    	    <input type="text" name="firstName" [(ngModel)]="userinfo.firstName"  class="form-control" [compose]="{validators:[identityNumberValidator.bind(this)],'conditionalExpression':'x => x.userName == \'Bharat\''}"/>
    
    	
        </div>
        <button [disabled]="!userinfoForm.valid" class="btn btn-primary">Submit</button>
      </form>
    </div>

这是控件自定义方法：

   identityNumberValidator =  (c: FormControl) => {
       
          let a = this;
          return {"msg":""};
        }

Stackbliz Example

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

1 个答案: