각도 4 : 사용자 정의 유효성 검사기가 작동하지 않습니다.

Question

angular 공식 문서에서이 예제를 가져 왔습니다. 사용자 지정 유효성 검사가 반응 형 폼을 사용하고 있지만 템플릿 기반 폼이 작동하지 않는 것으로 나타났습니다. 여기

는 mentioned example

지침의 plunker입니다 :

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
     const forbidden = nameRe.test(control.value); 
     return forbidden ? {'forbiddenName': {value: control.value}} : null; 
    }; 
    } 

    @Directive({ 
    selector: '[appForbiddenName]', 
    providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}] 
    }) 
    export class ForbiddenValidatorDirective implements Validator { 
    @Input() forbiddenName: string; 

    validate(control: AbstractControl): {[key: string]: any} { 
     return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control) 
           : null; 
    } 
    } 

템플릿 : 그래서이 appForbiddenName라고

<form #heroForm="ngForm"> 
     <div [hidden]="heroForm.submitted"> 

     <div class="form-group"> 
      <label for="name">Name</label> 
      <input id="name" name="name" class="form-control" 
       required minlength="2" forbiddenName="bob" 
       [(ngModel)]="hero.name" #name="ngModel" > 

      <div *ngIf="name.invalid && (name.dirty || name.touched)" 
       class="alert alert-danger"> 

      <div *ngIf="name.errors.required"> 
       Name is required. 
      </div> 
      <div *ngIf="name.errors.minlength"> 
       Name must be at least 2 characters long. 
      </div> 
      <div *ngIf="name.errors.forbiddenName"> 
       Name cannot be Bob. 
      </div> 

      </div> 
     </div> 
     </div> 
    </form> 

Answer 1

당신의 지시어, 내가 테스트

//in your directive 
@Input('appForbiddenName') forbiddenName: string; 

//In your template driven Form 
<input id="name" ... appForbiddenName="bob" ...>