Angular - Форма на основе шаблона - Проверка электронной почты не происходит

Question

Я делаю простую форму, управляемую шаблоном, с «проверкой по электронной почте» (не с помощью активных форм).Итак, требуется, minlength, maxlength работают нормально.Но, когда я пытаюсь, чтобы электронная почта была действительной, она терпела неудачу.Кто-нибудь может мне помочь?

abc.component.html

  <form #customForm="ngForm" (ngSubmit)="alpha(customForm)">

    <input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"><br/>

    <div *ngIf="firstName.touched">
      <p *ngIf="firstName.errors?.required">First Name is Required!!!</p>
      <p *ngIf="firstName.errors?.minlength">First Name minimum 3 characters are required!!!</p>
      <p *ngIf="firstName.errors?.maxlength">First Name max length is 10!!!</p>
    </div>

    <input type="email" name="email" ngModel #email="ngModel" required><br/>

    <div *ngIf="email.touched">
      <p *ngIf="email.errors?.required">Email is a required field!</p>
      <p *ngIf="email.errors?.email">This is not a valid Email!!!</p>
    </div>

    <button type="submit" [disabled]="customForm.invalid">Submit</button>

  </form>

Примечание: Хоть и требуется проверка электронной почты, но как образецили введенные данные неверны, 2-я проверка в div проверки электронной почты должна выдавать ошибку.

Результат: (электронная почта действительна)и его шаблон не выдает ошибку автоматически)

Answer 1

Заменить эту строку

<input type="email" name="email" ngModel #email="ngModel" required>

на

<input type="email" name="email" ngModel #email="ngModel" required email>// add email attribute

Answer 2

используйте «pattern = regrex» во входном теге и используйте электронную почту проверки? .Errors? .Pattern

Answer 3

Вы можете добавить атрибут email к своему входу электронной почты.Но тогда это не утвердит его для чего-то типа xxx@xxx, который, я думаю, не будет действительным письмом в вашем случае.

Я предлагаю вам использовать pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" вместо этого.Затем, когда вы показываете сообщение об ошибке, вы должны проверить вместо email.errors?.pattern.

Попробуйте:

<input 
  type="email" 
  name="email" 
  ngModel 
  #email="ngModel" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
  required>
<br/>

<div *ngIf="email.touched">
  <p *ngIf="email.errors?.required">Email is a required field!</p>
  <p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>

Попробуйте оба подхода на этом Пример StackBlitz и используйте тот, который вам больше подходит.