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

Question

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

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

Answer 1

最好的方法是使用活性形式，以及内置的验证。基本/最低限度的结构如下：

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

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