Как применить правило проверки с помощью директивы Реактивная форма?

Question

Я использую реактивные формы в Angular.

<input type="text" name="name" formControlName="name">

Как применить правило проверки (настраиваемое или стандартное Validators.required) для этого ввода с помощью директивы?

Answer 1

Существует множество встроенных директив, которые применяют некоторые встроенные валидаторы :

• RequiredValidator * Применяется директива 1008 * Validators.required валидатор

  <input type="text" name="name" formControlName="name" required>
                                                        ^^^^^^^^
  

• Директива EmailValidator использует Validators.email валидатор

  <input type="text" name="name" formControlName="name" [email]="true">
                                                        ^^^^^^^^^^^^^^
  

• MinLengthValidator директива использует Validators.minLength валидатор

  <input type="text" name="name" formControlName="name" minlength="4">
                                                        ^^^^^^^^^^^^^
  

• MaxLengthValidator директива использует Validators.maxLength валидатор

  <input type="text" name="name" formControlName="name" maxlength="10">
                                                        ^^^^^^^^^^^^^^
  

• Директива PatternValidator использует Validators.pattern валидатор

  <input type="text" name="name" formControlName="name" pattern="[a-zA-Z ]*">
                                                        ^^^^^^^^^^^^^^^^^^^^
  

Но вы также можете создать свою собственную настраиваемую директиву для применения правила проверки. Вам просто нужно реализовать интерфейс Validator , например

ts

@Directive({
  selector: '[customValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
class CustomValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors|null {
    return {'custom': true};
  }
}

html

<input type="text" name="name" formControlName="name" customValidator>
                                                      ^^^^^^^^^^^^^^^

Вы даже можете использовать свойство @Input для настройки logi c внутри валидатора

ts

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

  validate(control: AbstractControl): ValidationErrors|null {
    return control.value !== this.customValidator ? {'notYurzui': true} : null;
  }
}

html

<input type="text" name="name" formControlName="name" customValidator="yurzui">
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^

Если вам этого недостаточно и вы хотите выполнить асинхронную проверку, вы можете создать асинхронный c эквивалент настраиваемой директивы:

@Directive({
  selector: '[customAsyncValidator]',
  providers: [{
    provide: NG_ASYNC_VALIDATORS,
    useExisting: CustomAsyncValidatorDirective,
    multi: true
  }]
})
class CustomAsyncValidatorDirective implements AsyncValidator {
  validate(control: AbstractControl): Observable<ValidationErrors|null> {
    return of({'custom': true});
  }
}