我正在使用 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]
});
}
}
这是我的html脚本: -
<form class="form-horizontal" role="form" [formGroup]="loginFormGroup" (ngSubmit)="submitPost(loginFormGroup.value)" method="post">
<fieldset>
<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'].hasError('email')">Provide a valid email.</div>
<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('required')">You must add an email.</div>
<div class="clearfix"></div><br>
<div class="input-group input-group-lg" [ngClass]="{'has-error':!loginFormGroup.controls['password'].valid && loginFormGroup.controls['password'].touched}">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>
<input type="password" class="form-control" placeholder="Password" id="password" name="password" [formControl]="loginFormGroup.controls['password']" [(ngModel)]="adminLoginmodel.password"/>
</div>
<div class="alert alert-danger" *ngIf="!loginFormGroup.controls['password'].valid">You must add a password.</div>
<div class="clearfix"></div>
<p class="center col-md-5">
<button type="submit" class="btn btn-primary" [disabled]="!loginFormGroup.valid">Login</button>
</p>
<div class="clearfix"></div>
</fieldset>
</form>
Question 1: How to show only one validation message when two validation messages are showing up for a single input field?
检查下面给出的图像: -
当 email
字段中没有数据时,两个验证规则都令人满意: -
-
该字段没有数据,因此需要数据 .
-
空数据不是有效的电子邮件,因此需要有效的电子邮件 .
我需要只显示一条验证消息,而不是两条验证消息 . 如果未给出电子邮件,则应显示“您必须添加电子邮件” . 当给出电子邮件并且它不是有效的电子邮件时,只有它会显示“请提供有效的电子邮件”我该如何实现?
Question 2: How to show validation message only when the user interacts with the form?
目前,即使页面第一次加载,验证消息也会加载 . 即使用户未在字段中输入任何值或单击按钮,仍会显示验证消息 . 验证消息应仅在用户对表单执行任何操作时显示 . 我怎样才能做到这一点?
1 回答
第一个问题
第二个问题:Control Status Classes
.ng-有效
.ng-无效
.ng-pending
.ng-pristine
.ng-dirty
.ng-未触动过
.ng-touching
因此,在您的情况下,您需要检查您的控件是否脏,在检查它之前它是无效的 .