loginForm = new FormGroup({ email: new FormControl('', [ Validators.required, Validators.email ]), password: new FormControl('', [ Validators.required, Validators.minLength(6) ]) }); 
  <div *ngIf="loginForm.controls['email'].errors" class='invalid-feedback'> <div *ngIf="loginForm.controls['email'].errors.required"> Email не может быть пустым. Введите корректный email. </div> <div *ngIf="loginForm.controls['email'].errors.email"> Введите корректный email. </div> </div>

Why is always displayed:

"Email cannot be empty. Enter a valid email. Enter a valid email."

although it should flash: "Email can not be empty. Enter a valid email."

and when at least 1 character appears: "Enter a valid email."

If I write Validators.pattern that defines email, then everything works as it should, and when I use Validators.email it does not work correctly.

As it is:

enter image description here

It should be:

enter image description here enter image description here

  • and what is wrong? required checks for length > 0 , and email - there is a regular session under the hood - overthesanity
  • Immediately highlights both required and email - Andrey Shilets
  • and how should Initially, the value in the input is null , this value does not pass either the one or that check - overthesanity
  • if I use pattern, it is first required and then pattern - Andrey Shilets
  • stackblitz.com/edit/angular-6-reactive-form-validation there is even an example - Andrey Shilets

1 answer 1

The problem was in the 5th version of Angular. In Angular 6, everything works as it should.