如何使用Validators类在Angular2中为电子邮件验证显示不同的验证消息？

我正在使用FormGroup、FormBuilder和Validators类在Angular2应用程序中验证表单

以下是我如何定义电子邮件和密码验证所需的验证规则：-

export class LoginComponent implements OnInit {
    loginFormGroup:FormGroup;
    adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss');  

    constructor(
       private route: ActivatedRoute,
       private router: Router,
       private _adminLogin: AdminLoginService,
       fb: FormBuilder
    ){
         this.loginFormGroup = fb.group({
            'email' : [null, Validators.compose([Validators.required, Validators.email])],
            'password': [null, Validators.required]
         });
    }
}

代码

Validators.compose（[Validators.required，Validators.email]）

检查电子邮件字段是否为空以及提供的字符串是否为有效电子邮件

但是，我不知道如何在不同的情况下显示不同的验证消息。说

如果电子邮件字段为空，我需要显示“请提供电子邮件” 地址“

如果提供的电子邮件无效，则我需要显示“提供的电子邮件无效”

以下是我在html中显示验证消息的方式：-

<div class="input-group input-group-lg" [ngClass]="{'has-error':!loginFormGroup.controls['email'].valid && loginFormGroup.controls['email'].touched}">
   <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span>
   <input type="text" class="form-control" placeholder="Email" id="email" name="email" [formControl]="loginFormGroup.controls['email']" [(ngModel)]="adminLoginmodel.email"/>
</div>
<div class="alert alert-danger" *ngIf="!loginFormGroup.controls['email'].valid">You must add an email.</div>

您必须添加电子邮件。

如何在不同的情况下显示不同的消息？

从'@angular/core'导入{Component}；
import { Component } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <input [formControl]="ctrl" />

  <div *ngIf="ctrl.errors?.email">
    Provided email is not a valid email
  </div>

  <div *ngIf="ctrl.errors?.required">
    Please provide an email address
  </div>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ctrl = new FormControl(null, Validators.compose([Validators.email, Validators.required]));
}

从'@angular/forms'导入{FormControl，Validators}；
@组成部分({
选择器：“我的应用程序”，
模板：`
提供的电子邮件不是有效的电子邮件
请提供电子邮件地址
`,
样式URL:['./app.component.css']
})
导出类AppComponent{
ctrl=newFormControl（null，Validators.compose（[Validators.email，Validators.required]）；
}

评论中的讨论证明，这个具体问题的答案是：

<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('email')">Provide a valid email.</div>
<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('required')">Please provide an email address</div>

提供有效的电子邮件。
请提供电子邮件地址

您可以使用它来显示错误消息

<div *ngIf="loginFormGroup.get('email').touched && loginFormGroup.get('email').hasError('required')">Please provide an email address</div>
  <div *ngIf="loginFormGroup.get('email').touched && loginFormGroup.get('email').hasError('email')">Provided email is not a valid email</div>

请提供电子邮件地址
提供的电子邮件不是有效的电子邮件

提供的电子邮件不是有效的电子邮件，请提供电子邮件地址。

不显示任何消息。实时演示正常工作。在您的情况下，您需要将

*ngIf

表达式更改为

loginFormGroup.get（'email'）.errors？.email

和

loginFormGroup.get（'email'）.errors？.required

您必须添加一封电子邮件。

不会显示任何错误消息

提供有效的电子邮件。

做到了这一点。