当多个验证消息满足条件时，在 Angular2 中管理验证消息

Question

我正在使用 FormGroup、FormBuilder 和 Validators class 来验证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>

问题 1: 如何在单个输入字段显示两条验证消息时只显示一条验证消息？

检查下面给出的这张图片：-

当 email 字段中没有数据时，两个验证规则都满足：-

该字段没有数据，因此需要数据。
空数据不是有效的电子邮件，因此需要有效的电子邮件。

我只需要显示一条验证消息，而不是两条验证消息。如果未提供电子邮件，则应显示 "You must add an email"。当给出电子邮件并且它不是有效的电子邮件时，它只会显示 "Please provide a valid email" 我怎样才能做到这一点？

问题二： 如何仅在用户与表单交互时显示验证消息？

目前，即使页面是第一次加载，验证消息也会加载。即使用户没有在字段中输入任何值或单击按钮，验证消息仍然会显示。验证消息只应在用户对表单执行任何操作时显示。我怎样才能做到这一点？

Answer 1

第一题

<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('email') && !loginFormGroup.controls['email'].hasError('required')">Provide a valid email.</div>
<div class="alert alert-danger" *ngIf="loginFormGroup.controls['email'].hasError('required')">You must add an email.</div>

第二个问题：Control Status Classes

Angular automatically mirrors many control properties onto the form control element as CSS classes.

.ng-valid
.ng-invalid
.ng-pending
.ng-pristine
.ng-dirty
.ng-untouched
.ng-touched

所以在你的情况下，你需要检查你的控件是否脏，然后再检查它是否无效。

<ng-container *ngIf="loginFormGroup.controls['email'].dirty">
  <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>
</ng-container>

当多个验证消息满足条件时，在 Angular2 中管理验证消息

Manage validation message in Angular2 when multiple validation messages are satisfying the conditions

validation

angular2-forms

angular

angular2-form-validation