前端显示消息 "This email is already registered" PrimeNG & scss

Question

我无法弄清楚如何在 angular 的前端输入电子邮件时通知新注册用户电子邮件已在输入元素下方注册。请协助。我能够检索关于电子邮件是否已注册或可用的异步验证响应。我正在使用 PrimeNG 组件和 scss

在我的网络响应中，API 响应，我看到 {"email":"This eamil is already registered"} 如果电子邮件已经注册，如果电子邮件未注册，{"available" :true}.

下面是我的 unique-email.ts.

中异步验证器的代码

export class UniqueEmail implements AsyncValidator {
  constructor(private authService: AuthService) {}

  validate = (control: AbstractControl) => {
    const { value } = control;

    return this.authService.emailAvailable(value).pipe(
      map((value) => {
        if (value.available) {
          return null;
        }
      }),
      catchError((err) => {
        if (err.error.email) {
          return of({ EmailInUse: true });
        } else {
          return of({ noConnection: true });
        }
      })
    );
  };
}

下面是我的 AuthService.ts

代码

interface EmailAvailableResponse {
  available: boolean;
}

export class AuthService {
  apiURLAuth = environment.apiUrl + 'users';

  constructor(private http: HttpClient) {}

  emailAvailable(email: string) {
    return this.http.post<EmailAvailableResponse>(`${this.apiURLAuth}/emailexist`, {
      email
    });
  }

}

我的signup.component.ts

export class SignupComponent implements OnInit {
 signupFormGroup: FormGroup;
  isSubmitted = false;
  authError = false;

constructor(
    private matchPassword: MatchPassword,
    private uniqueEmail: UniqueEmail,
    private formBuilder: FormBuilder,
    private authService: AuthService,
    private localstorageService: LocalstorageService
  ) {}

private _initSignupForm() {
    this.signupFormGroup = this.formBuilder.group(
      { 
       email: ['', [Validators.required, Validators.email], [this.uniqueEmail.validate]]
     }
  )
}

get isignupForm() {
    return this.signupFormGroup.controls;
  }
}

<form [formGroup]="signupFormGroup">
          <div class="col-12">
              <div class="p-inputgroup">
                <span class="p-inputgroup-addon"><i class="pi pi-id-card"></i></span>
                <input type="text" formControlName="email" pInputText placeholder="Email" />
              </div>
              <small *ngIf="isignupForm.email.invalid && isSubmitted" class="p-error"
                ><span *ngIf="isignupForm.email.errors.required">Email is required</span>
                <span *ngIf="isignupForm.email.errors.email">Email is Invalid</span>
                <span *ngIf="isignupForm.email.errors.email.EmailInUse"
                  >Email is already registered to another user. Try another email account</span
                >
              </small>
            </div>
</form>

Answer 1

有错误

isignupForm.email.errors.email.EmailInUse

改为使用：

<span *ngIf="isignupForm.email.errors.EmailInUse">
    Email is already registered to another user. Try another email account
</span>

Sample Demo on StackBlitz

前端显示消息 "This email is already registered" PrimeNG & scss

Front-end Display Message "This email is already registered" PrimeNG & scss

node.js

angular

primeng