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

【问题标题】：Default type=email validation being ignored默认类型=电子邮件验证被忽略
【发布时间】：2018-10-14 17:42:53
【问题描述】：

我正在构建一个 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 为false，并且在按下提交按钮时会显示浏览器错误，但这并没有发生。当然，我可以自己验证这一点——但没有得到想要的行为会让我发疯。

结果如下：

有什么想法吗？

【问题讨论】：

标签： html validation angular-material2

【解决方案1】：

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

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

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

【讨论】：

这正是我所做的。仍然好奇为什么默认行为不起作用。