Управление сообщением проверки в Angular2, когда несколько сообщений проверки удовлетворяют условиям

Question

Я использую класс 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>

Вопрос 1:Как показать только одно сообщение проверки, когда два сообщения проверки отображаются для одного поля ввода?

Проверьте это изображение, приведенное ниже:

Когда нет данных внутри email поле, оба правила проверки удовлетворяют:-

1. Поле не имеет данных, поэтому данные необходимы.
2. Пустые данные не являются действительным адресом электронной почты, поэтому требуется действительный адрес электронной почты.

Вместо двух сообщений проверки мне нужно показать только одно сообщение проверки. Если электронная почта не указана, на ней должно появиться сообщение "Вы должны добавить электронную почту". Когда дается электронное письмо, и оно не является действительным, то только на нем будет отображаться "Пожалуйста, укажите действительное электронное письмо". Как я могу добиться этого?

Вопрос 2:Как показать сообщение проверки только тогда, когда пользователь взаимодействует с формой?

В настоящее время сообщения проверки загружаются даже при первой загрузке страницы. Даже если пользователь не вводит какое-либо значение в поле или не нажимает кнопку, все равно отображается сообщение проверки. Сообщение проверки должно отображаться только тогда, когда пользователь выполняет какие-либо действия в форме. Как мне этого добиться?

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>

Второй вопрос: классы контроля состояния

Angular автоматически отображает многие свойства элемента управления на элементе управления формы как классы CSS.

• .ng-действительный
• .ng-инвалид
• .ng рассмотрение
• .ng-нетронутые
• .ng грязный
• .ng-нетронутым
• .ng коснулся

Так что в вашем случае вам нужно проверить, не загрязнен ли ваш элемент управления, прежде чем проверять его на недействительность.

<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>