angular - 如何使用指令响应式表单应用验证规则？

Question

我在 Angular 中使用响应式表单。

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

如何使用指令为此输入应用验证规则(自定义或默认 Validators.required)？

Answer 1

有许多内置指令应用了一些内置 Validators :

RequiredValidator指令适用 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接口(interface)，例如
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属性以自定义验证器内部的逻辑
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">
                                                      ^^^^^^^^^^^^^^^^^^^^^^^^

如果这对您来说还不够，并且您想要异步验证，那么您可以创建自定义指令的异步等效项:

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