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

Question

我在angular 6中使用angular 6。

我添加了一个名为custom validation identityNumberValidator的标识号字段，该字段检查用户输入的标识号是否正确(IL标识)

验证指令如下所示：

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

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

我试过[identityNumberValidator] = "element == 1 ? '' : null"，但不起作用。我读过这篇文章模板驱动形式的角度条件验证

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

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

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

知道吗？

Answer 1

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

在这里，我在输入字段中使用了[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示例