Question

我正在为必填字段和无效的电子邮件地址进行电子邮件验证。单击提交按钮后，我想对“如果未在数据库中找到电子邮件”进行验证，那么它应该显示一些错误消息，如我显示的required和pattern。下面是我的代码。我正在使用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.
                            }
                     });

一旦显示msg，然后在电子邮件输入字段中进行退格键后，错误消息应该消失。如果数据库中不存在该消息，则如何显示“未找到电子邮件”消息。谁能帮我实现这一目标。

Answer 1

在您的html中的输入字段上添加一个事件处理程序，以检查它是否为Backspace和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的其他部分，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();
     }
}

Answer 2

请尝试这个

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

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

2 个答案: