Пользовательская проверка в Angular 8

Question

Я хочу реализовать пользовательскую проверку (Обязательно / Шаблон / Отключить) через директиву Angular 8:

<input type="text"
      custom-data-annotation
      [(ngModel)]="someValue"
      name="userName" />

Я создал следующую директиву:

@Directive({selector: '[custom-data-annotation]'})
export class CustomDataAnnotationDirective implements OnInit  { 

  constructor(public el: ElementRef, private _renderer: Renderer2) {} 

  ngOnInit() {
    this._renderer.setAttribute(this.el.nativeElement, 'required', 'true'); 
  } 
}

Когда Я запускаю приложение и проверяю элемент. Я вижу атрибут required в поле input, но когда я отправляю свою страницу без указания значения в этом поле, она всегда возвращает false для "myForm.form.invalid"

Answer 1

Чтобы создать валидатор, работающий в элементе управления формы на основе шаблона, недостаточно поместить атрибут required в элемент управления формы, потому что angular создает его валидаторы во время компиляции. Во время выполнения, чтобы динамически добавить валидатор, вам нужно сообщить angular, что ваша директива является валидационной. Кроме того, вы должны проверить действительность элемента управления самостоятельно. Вы можете сделать эти 2 вещи, реализуя интерфейс Validator и предоставив ему NG_VALIDATORS токен ( см. Документы ):

@Directive({
  selector: '[custom-data-annotation]',
  // You must provide the class with `NG_VALIDATORS` token
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: CustomDataAnnotationDirective,
      multi: true
    }
  ]
})
export class CustomDataAnnotationDirective implements OnInit, Validator {
  constructor(private _el: ElementRef, private _renderer: Renderer2) {}

  ngOnInit() {
    this._renderer.setAttribute(this._el.nativeElement, 'required', 'true');
  }

  // This method is demanded by the the Validator interface
  validate(control: AbstractControl): { [key: string]: any } | null {
    return !control.value ? { required: true } : null;
  }
}

Stackblitz demo

И ... если вам решать, решите переключиться на ReactiveFormsModule, как рекомендовано @ angular docs , для сложные формы .