66-async-validations.md

service

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(
    private http: HttpClient
  ) { }

  checkEmail(email: string) {
    // simulate http.get()
    return of({ isEmailAvailable: email !== '[email protected]'})
      .pipe(delay(500));
  }
}

validations

static validateEmail(userService: UserService) {
    return (control: AbstractControl) => {
      const value = control.value;
      return userService.checkEmail(value)
      .pipe(
        map(response => {
          const isEmailAvailable = response.isEmailAvailable;
          return isEmailAvailable ? null : {notAvailable: true};
        })
      );
    };
  }

validateEmail(control: AbstractControl)  {
    const value = control.value;
    return this.userService.checkEmail(value)
    .pipe(
      map(response => {
        const isEmailAvailable = response.isEmailAvailable;
        return isEmailAvailable ? null : {notAvailable: true};
      })
    );
  }

html

<p class="help is-danger" *ngIf="emailField.hasError('notAvailable')">
  Es correo esta ocupado
</p>