时间戳

首页 > 解决方案 > 如果电子邮件模式不匹配，如何使用 ngif 检查

angular - 如果电子邮件模式不匹配，如何使用 ngif 检查

问题描述

如何检查模式是否与输入字段中输入的电子邮件匹配。

<input type="email" name="email" #email ngModel required [pattern]="emailPattern" placeholder="Email *"/>
    <div *ngIf="validateEmail(email)">Email not valid</div>

.ts 文件

pattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
validateEmail(email) {
if (email == pattern) {
return true;

标签： angular

解决方案

最好的方法是使用响应式表单和内置验证器。基本/裸最小结构如下：

import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';


@Component({
  selector: 'user',
  styleUrls: ['user.component.scss'],
  template: `

<form novalidate [formGroup]="form">
     <label for="Email">Email: </label> 
     <input type="text" formControlName="Email">
</form>
`
})
export class User {

  form = this.fb.group({
    Email: ['', [Validators.required, Validators.email]]
  })

  constructor(
    private fb: FormBuilder
  ) {}
}

这要求用户输入电子邮件，并使用内置验证器确保它与标准电子邮件模式匹配。

推荐阅读