![validators]( "validators")
本文介绍了如何使用 Validators 类在 Angular2 中为电子邮件验证显示不同的验证消息?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 FormGroup、FormBuilder 和 Validators 类来验证 Angular2 应用中的表单.
这就是我定义电子邮件和密码验证所需的验证规则的方式:-
导出类 LoginComponent 实现 OnInit {登录表单组:表单组；adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss');构造函数(私人路线:ActivatedRoute，专用路由器:路由器，私人 _adminLogin: AdminLoginService,fb: 表单生成器){this.loginFormGroup = fb.group({'email' : [null, Validators.compose([Validators.required, Validators.email])],'密码':[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.控件['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 class="alert alert-danger" *ngIf="!loginFormGroup.controls['email'].valid">您必须添加电子邮件.</div>
如何在不同的情况下显示不同的消息?
解决方案
import { Component } from '@angular/core';从@angular/forms"导入 {FormControl, Validators}；@成分({选择器:'我的应用'，模板:`<input [formControl]="ctrl"/><div *ngIf="ctrl.errors?.email">提供的电子邮件不是有效的电子邮件
<div *ngIf="ctrl.errors?.required">请提供电子邮件地址
`，styleUrls: ['./app.component.css']})导出类 AppComponent {ctrl = new FormControl(null, Validators.compose([Validators.email, Validators.required]));}
现场演示
评论中的讨论证明这个特定问题的答案是:
<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('email')">提供有效的电子邮件.</div><div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('required')">请提供电子邮件地址</div>
I am using FormGroup, FormBuilder and Validators class to validate a form in Angular2 app.
This is how I am defining the required validation rules for email and password validation:-
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]
});
}
}
The code Validators.compose([Validators.required, Validators.email]) checks both whether an email field is empty and whether the provided string is valid email.
However, I don't know how to show different validation message in different cases. Say
- If email field is empty, I need to display "Please provide an emailaddress"
- If provided email is not valid, then I need to display "Provided email is not a valid email".
Here is how I was displaying validation message in my 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>
How can I show different messages in different cases?
解决方案
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]));
}
Live demo
Discussion in the comments proved that the answer to this specific problem is:
<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>
这篇关于如何使用 Validators 类在 Angular2 中为电子邮件验证显示不同的验证消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！