Angular 7中的http.get API不会为异步验证触发

时间:2019-03-13 06:54:44

标签: angular angular7 angular-validation

我正在用angular 7实现唯一的电子邮件验证。此代码中没有错误,但由于未在电子邮件验证功能中使用订阅,因此GET请求未触发。我也尝试在验证功能中订阅,然后给出错误。对于在服务中使用Promise,它会在验证文件中给出错误。

  

管道不是函数

如何使用ObservablePromise执行此操作?

会员服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { IMember, Credential } from './client-schema';
import { Observable, of } from 'rxjs';
import { map, publish } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { AuthService } from './services/auth.service';


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

  private _memberCountUrl: string = environment.apiUrl + '/members/count';

  constructor(
    private http: HttpClient,
    private _AuthService: AuthService
  ) {}

  getUserCount(whereCond: string): Observable<any> {
    console.log(whereCond);        
    return this.http.get<any>(`${this._memberCountUrl}?${whereCond}`);        
  }    
}

电子邮件验证指令

import { Directive } from '@angular/core';
import { AsyncValidator, AbstractControl, ValidationErrors, NG_ASYNC_VALIDATORS, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { MemberService } from '../member.service';
import { map } from 'rxjs/operators';

export function UniqueEmailValidator(_memberService: MemberService): AsyncValidatorFn {
  return (ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
    console.log(ctrl.value);
    return _memberService.getUserCount(ctrl.value).pipe(
      map(res => {
        return res  ? { 'uniqueEmail': true } : null;
      })
    );
  }

}

@Directive({
  selector: '[appUniqueEmail]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueEmailValidatorDirective, multi: true }]
})
export class UniqueEmailValidatorDirective implements AsyncValidator {

  constructor(private _memberService: MemberService) { }

  validate(ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return UniqueEmailValidator(this._memberService)(ctrl);        
  }
}

成员组件 表单初始化-

this.profileForm = this.formBuilder.group({
      fName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(250)]],
      lName: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(250)]],
      email: ['', [
        Validators.required,
        Validators.pattern(new RegExp('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{1,}')),
        UniqueEmailValidator(this._memberService)           
      ]]          
    });

0 个答案:

没有答案