Question

我通过教程实施了电子邮件验证。问题是电子邮件验证接受的是诸如“ asd @ asd”之类的无效邮件。

第二个错误：“ ngModel无法用于通过父formGroup指令注册表单控件。尝试使用 formGroup的伙伴指令“ formControlName”代替。 ” 尝试了所有关于stackoverflow的答案，但是没有一个起作用。我在做什么错了？

  this.loginForm = this.formBuilder.group({
          email: ['', [Validators.required, Validators.email,
Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$')]],
        });

模板：

 <input class="form-control" formControlName="email" type="text"[(ngModel)]="username" name="username" placeholder="E-mail"
               [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
        <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
          <div *ngIf="f.email.errors.required">Email is required</div>
          <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
        </div>

Answer 1

您可以单独使用formControlName指令来绑定电子邮件控件。

<form [formGroup]= 'loginForm'> 
   <input id='email'  class="form-control" formControlName="email" 
        type="text" placeholder="E-mail" 
        [ngClass]="{ 'is-invalid': submitted && email.errors }" /> 
   <div *ngIf="submitted && email.errors" class="invalid-feedback"> 
       <div *ngIf="email.errors.required">Email is required</div>
       <div *ngIf="email.errors.email">
          Email must be a valid email address
       </div>
   </div>
</form>

或者，您可以使用control方法获取loginForm.get('email')实例，并使用loginForm.get('email').errors对象显示错误消息。

Angular 8电子邮件验证引发异常

1 个答案: