Angular如何使用HTML默认的required输入验证

我希望使用HTML自带的默认required验证。以下是我的代码：

<form (ngSubmit)="submit()">
  <div class="login-container">
    <ion-item>
      <ion-input
        required
        type="email"
        [(ngModel)]="vm.email"
        placeholder="Email"
        name="Email"
      ></ion-input>
    </ion-item>
    <ion-item>
      <ion-input
        required
        type="password"
        [(ngModel)]="vm.password"
        placeholder="Password"
        name="Password"
      ></ion-input>
    </ion-item>

    <div class="ion-text-center">
      <ion-button expand="full" class="button-round" type="submit"
        >Login</ion-button
      >
    </div>
  </div>
</form>

当前点击提交按钮会直接进入submit()函数。在React中，若输入项无效，默认会阻止调用submit()并提示“This field is required”之类的错误信息。请问在Angular中该如何实现这一效果？我不想使用麻烦的自定义验证，仅需实现required验证即可。

解决方案 #

Angular默认会自动给表单添加novalidate属性，禁用原生HTML验证。要启用原生的required验证，只需给form标签添加ngNativeValidate指令即可：

修改后的代码 #

<form (ngSubmit)="submit()" ngNativeValidate>
  <div class="login-container">
    <ion-item>
      <ion-input
        required
        type="email"
        [(ngModel)]="vm.email"
        placeholder="Email"
        name="Email"
      ></ion-input>
    </ion-item>
    <ion-item>
      <ion-input
        required
        type="password"
        [(ngModel)]="vm.password"
        placeholder="Password"
        name="Password"
      ></ion-input>
    </ion-item>

    <div class="ion-text-center">
      <ion-button expand="full" class="button-round" type="submit"
        >Login</ion-button
      >
    </div>
  </div>
</form>

说明 #

添加ngNativeValidate指令后，Angular会保留原生HTML的表单验证逻辑：

• 当必填项为空时，点击提交按钮会触发浏览器原生的错误提示（如“This field is required”）
• 只有当所有验证项通过后，才会执行submit()函数
• 同时也会生效type="email"的格式验证，输入不符合邮箱格式时也会触发原生提示

内容的提问来源于stack exchange，提问作者Alvin Stefanus