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

Issue

I am not able to figure out how to inform a new registering user that email is already registered below the input element on entering email on my front-end in angular. Please assist. I am able to retrieve my async validation response as to whether the email is already registered or is available. I am using PrimeNG components and scss

In my Network Response, API response, I see {"email":"This eamil is already registered"} if the email is already registered and if the email is not registered, {"available":true}.

Below is the code for async validator in my 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 });
        }
      })
    );
  };
}

Below is my code for 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
    });
  }

}

My 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>

Solution

There is an error for

isignupForm.email.errors.email.EmailInUse

Instead, use:

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

Sample Demo on StackBlitz

Answered By – Yong Shun

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published