如何使用异步呼叫使用验证器指令

Question

我创建了一个验证器指令，该指令提出了HTTP请求，该请求检查是否已经存在电子邮件。

我可以看到API调用发生了，但是在模板中，验证不起作用

：

@Directive({
    selector:
        '[emailValidator][formControlName],[emailValidator][formControl],[emailValidator][ngModel]',
    providers: [
        {
            provide: NG_ASYNC_VALIDATORS,
            useExisting: forwardRef(() => EmailValidatorDirective),
            multi: true
        }
    ]
})
export class EmailValidatorDirective implements Validator {
    constructor(private _http: HttpService) {}

    validate(
        c: AbstractControl
    ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
        return this.validateEmail(c.value);
    }

    private validateEmail(email: String): Observable<ValidationErrors | null> {
        return this._http.post('user/validate-email', { email }).pipe(
            debounceTime(500),
            distinctUntilChanged(),
            map((isUsed) => {
                // null no error, object for error
                return !isUsed
                    ? null
                    : {
                            isTaken: 'Email exists already.'
                      };
            })
        );
    }
}

模板：

<input
    id="email"
    type="email"
    class="form-control"
    formControlName="email"
    emailValidator
    placeholder="Enter E-mail Address"
/>

// always showing null
{{ formcontrol['email'].errors | json }}

Answer 1

您需要实施 asycnvalidator

如果您愿意，您也可以在同一验证器中包含验证器。

private validateEmail(email: string): Observable<ValidationErrors | null> {
    //required
    if (!email) return of({ required: true });

    //email regExpr
    const EMAIL_REGEXP =
      /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

    if (!EMAIL_REGEXP.test(email)) return of({ email: true });

    return of(email).pipe(
      debounceTime(500),
      distinctUntilChanged(),
      delay(500),
      map((email) => {
        //check if exist
        return emailsYetGet.find((x) => x == email)
          ? {
              isTaken: 'Email exists already.',
            }
          : null;
      })
    );
  }

​stackblitz

注意：请记住，请记住您的指示在模块的声明中，您使用它的组件在哪里，并检查您的api

note2：regexpr我得到了