如何使用ngif检查电子邮件模式是否不匹配

时间:2019-02-04 18:12:32

标签: angular

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

<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;

1 个答案:

答案 0 :(得分:0)

最好的方法是使用反应形式和内置的验证器。基本/裸露的最低结构如下:

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
  ) {}
}

这要求用户输入电子邮件,并使用内置的验证程序确保其与标准电子邮件格式匹配。