在Angular/TypeScript中使用RegExp检查同一电子邮件时,输入字段上的Pattern属性返回不同的results?[副本]

链接到工作示例- https://angular-gej8ow.stackblitz.io . https://stackblitz.com/edit/angular-gej8ow

说明-

当我在输入中输入'johndoe@dsx.com'时,TypeScript中的RegeExp和pattern属性都会将其标记为有效电子邮件。但是,电子邮件'johndoe@dsx.coms'被RegExp标记为有效,被pattern属性标记为无效。这两种测试regex的方式有区别吗?

这是TypeScript代码,它正在.ts文件中使用-

emailRegex = new RegExp("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")

checkEmail(email: string) {
  if(this.emailRegex.test(email)) {
    console.log("Email is valid")
  } else {
    console.log("Email is not valid");
  }
}

<mat-form-field>
  <input
    required
    matInput
    placeholder="Email"
    ngModel
    name="email"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
    #email="ngModel"
    (keyup)="checkEmail(email.value)"
    (blur)="checkEmail(email.value)"
    (change)="checkEmail(email.value)"
  >
  <mat-hint>Email is required.</mat-hint>
  <mat-error>
    Email is not valid.
  </mat-error>
</mat-form-field>