在 Angular 6 的数据库验证中找不到电子邮件地址

Question

我正在对必填字段和无效的电子邮件地址进行电子邮件验证。 单击提交按钮后，我想对“如果在数据库中找不到电子邮件”进行验证，那么它应该显示一些错误消息，就像我为必需和模式显示的那样。 下面是我的代码。我正在使用 Angular 6 材料设计。

             <form [formGroup]='loginForm' id="loginForm">       
             <mat-form-field>
              <mat-label>Email Address</mat-label>             
              <input matInput placeholder="" formControlName="emailid" required>
              <mat-error *ngIf="formControl.emailid.errors && (formControl.emailid.dirty || formControl.emailid.touched)">
                <p *ngIf="formControl.emailid.errors.required">Email is required</p>
                <p *ngIf="formControl.emailid.errors.pattern">Invalid email address</p>

              </mat-error>
              </mat-form-field>
              <button mat-button type="submit" (click)="login()">Login</button>
               </form>

下面是 ts 文件的代码 id。

               loginForm: FormGroup;
               emailId: any;
               status: any;

               ngOnInit(){
                this.loginForm = this.formBuilder.group({
                  emailid: ['', [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]]
                });
               }

                get formControl() { return this.loginForm.controls; }

                 login() {
                    this.emailId = this.loginForm.controls['emailid'].value;
                        this.service.get({{ email: this.emailId}, 'url').subscribe((response) => {
                           this.result = response;
                              this.status = this.result.status;
                              if (this.status === 200) {
                                               //navigate to home page
                            } else If(this.status === 404) {
                                console.log("email not found");
                                // here i want to show this message like aboove i am showing for required and pattern field.
                            }
                     });

一旦显示消息，然后在电子邮件输入字段中执行退格后，错误消息应该会消失。如果数据库中没有“电子邮件未找到”消息，如何显示。 任何人都可以帮助我如何实现这一目标。

Answer 1

请试试这个

this.loginForm.controls['email'].setErrors({'incorrect': true});

Answer 2

在您的 html 中，在您的输入字段上添加一个事件处理程序，以检查它是否是退格键和 resetForm，这将删除表单上的错误。

在 HTML 中：

<input matInput placeholder="" formControlName="emailid" (keypress)="ResetForm($event)" required>

<mat-error> 标签之后：

<p *ngIf="isEmailPresent">Email Address Not found</p>

在您的 ts 文件中，初始化 isEmailPresent=false 和 在你得到 404 的 else 部分，this.isEmailPresent=true;

在 ts 文件中：确保在下面导入

import { Component, ViewChild } from '@angular/core';
import {
  FormGroup,
  FormBuilder,
  FormGroupDirective,
  Validators,
} from '@angular/forms';

将 formdirective 添加为 viewchild：

 @ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirective;

在您的按键事件重置表单中

ResetForm(event)
{
  if(event && event.keycode==8)//(keycode for backspace)
    {
       this.formGroupDirective.resetForm();
     }
}