Angular 5 - 表单验证电子邮件

Question

我想解决这个问题:Angular 5 - 模板驱动的形式

输入字段具有类型电子邮件.例:

<input type="email" [(ngModel)]="model.email" #email="ngModel" email />

我想验证这个字段.但它不应该是必填字段.如果验证不为空,则应仅启动验证.如果该字段为空,则可以使用.否则,在电子邮件地址正确之前,应显示错误消息.

这不是真正的工作:

*ngIf="email.untouched && email.invalid"

那么,我该如何验证电子邮件字段？我想念"不空"这样的状态.

任何提示？

Answer 1

使用pattern带有正则表达式的属性进行电子邮件验证

 <div class="form-group">
        <label for ="email">Email</label>
          <input type="text" class="form-control" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" id="email"name="email" ngModel #emailref="ngModel">
          <div *ngIf="emailref.errors &&(emailref.touched || emailref.dirty)" class ="aler alert-danger">
           <div [hidden]="!emailref.errors?.pattern">
             Invalid pattern
           </div> 
          </div> 
    </div>

Answer 2

对于 Angular 8 版本，有内置的电子邮件验证器可用。

在组件类变量中

email= new FormControl('',[
    Validators.required,
    Validators.email
  ]);

在组件 html

 <input type="email" [formControl]="email" class="form-control" id="email" required>
                    <div *ngIf="email.invalid && (email.dirty || email.touched)"
                    class="alert alert-danger">
                        <div *ngIf="email.errors.required">
                            Email is required.
                        </div>  
                        <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>                                               
                    </div> 
                       <div *ngIf="email.errors.email">
                            Please enter a valid email.
                        </div>   //this is not work
                       <div *ngIf="email.errors.validateEmail">
                            Please enter valid email
                        </div > //use this

Answer 3

您可以简单地将其他条件传递到ngIf指令中，以检查输入的当前值是否为空字符串。

*ngIf="email.value !== '' && email.untouched && email.invalid"