默认类型=电子邮件验证被忽略

Question

我正在构建 Angular Material 注册表单。输入元素之一是 type=email.

预期的行为是，在提交时，如果电子邮件的电子邮件格式不正确，则表单将无效，我将收到默认浏览器错误，参见此处：

然而，事实并非如此。我正在使用 Material 组件构建表单：

<form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <mat-form-field class="form-full">
        <input matInput placeholder="First Name" style="width:350px" formControlName="firstName" required />
    </mat-form-field>
    <mat-form-field class="form-full">
        <input matInput placeholder="Last Name" style="width:350px" formControlName="lastName" required />
    </mat-form-field>
    <mat-form-field class="form-full">
        <input matInput placeholder="Email" style="width:350px" type="email" formControlName="email" required />
    </mat-form-field>
    <mat-form-field class="form-full">
        <input matInput placeholder="Password" style="width:350px" type="password" formControlName="password" required />
    </mat-form-field>
    <mat-form-field class="form-full">
        <input matInput placeholder="Confirm Password" style="width:350px" type="password" formControlName="confirmPassword" required />
    </mat-form-field>
    <mat-card-actions>
        <button mat-raised-button mat-button color="primary" type="submit">Register</button>
    </mat-card-actions>
</form>

我的 register.component.ts 现在非常基础，因为我刚刚开始构建组件。我将一个表单组绑定到我的注册表单并在 onSubmit 中调出一些值。

export class RegisterComponent {

  registerForm;

  constructor(private fb: FormBuilder) {
    this.registerForm = fb.group({
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      confirmPassword: '',
    })
  }

  onSubmit() {
    console.log(this.registerForm.value);
    console.log(this.registerForm.valid);
  }

}

我希望 registrationForm.valid 为假，并在按下提交按钮时显示浏览器错误，但是这并没有发生。当然，我可以自己验证这一点——但没有得到想要的行为让我抓狂。

结果如下：

有什么想法吗？

Answer 1

您应该能够使用 EmailValidator 指令，只需将 email 属性添加到您的输入语法中。

 <input matInput placeholder="Email" style="width:350px" type="email" formControlName="email" email required />

https://angular.io/api/forms/EmailValidator

默认类型=电子邮件验证被忽略

Default type=email validation being ignored

html

validation

angular-material2