Почему reactive form Validator.email не работает для «this.form.invalid»

#angular #angular6 #mean-stack #angular7 #reactive-forms

#angular #angular6 #означает-стек #angular7 #angular-reactive-forms

Вопрос:

Я работаю с реактивными формами и использую средства проверки формы для проверки полей. Я применил две проверки к полю электронной почты.

 loginForm = this.fb.group({
userEmail : ['', [Validators.required, Validators.email]],
userPassword : ['', Validators.required] 
});
  

это работает, когда я применяю проверку одного поля, и я могу показать ошибку для обеих проверок, но когда я использую проверку времени входа для всей формы

 this.loginForm.invalid
  

тогда это работает только для validator.required, но не для validator.email.

 this.loginForm.invalid
  

возвращает false, даже если я не добавляю правильный тип электронной почты.

Комментарии:

1. Что вы ввели? У вас есть воспроизводимый пример? Я не могу воспроизвести: stackblitz.com/edit /…

2. Теперь мой пример работает нормально. Вы все еще хотите знать?

3. Значит, вы тоже не можете его воспроизвести? Тогда удалите свой вопрос.

Ответ №1:

Добавьте Validators.compose в свой код и попробуйте:

 loginForm = this.fb.group({
userEmail : ['',  Validators.compose([Validators.required, Validators.email])],
userPassword : ['', Validators.required] 
});
  

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

Комментарии:

1. Сейчас работает нормально.

2. Нет необходимости в compose, он вызывается внутренне при создании элемента управления формой