angular 4: пользовательский валидатор не работает

Я взял этот пример из официального документа angular. Я заметил, что настраиваемая проверка работает с реактивными формами, но не работает с формами на основе шаблонов.

Вот плункер упомянутого примера

директива:

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

шаблон:

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

angular forms angular-directive custom-validators
person blue    schedule 11.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

ваша директива называется appForbiddenName, поэтому

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

//In your template driven Form
<input id="name" ...  appForbiddenName="bob" ...>
person Eliseo    schedule 11.12.2017
comment
Я тестировал это в плункере, но это не сработало. Не могли бы вы дать ссылку на рабочий код в своем ответе - person blue; 11.12.2017
comment
: glups :, это не директива, просто напишите ‹input id = name ... appForbiddenName = bob ...› без [] -Я меняю код - person Eliseo; 11.12.2017