Angular 10表单提交时触发ngIf验证错误提示的实现方法

你当前的模板驱动表单仅在字段被dirty或touched时显示错误提示，但提交时未触碰的必填字段不会触发提示，导致表单能被提交。要让提交验证不通过时显示和用户触碰字段一致的错误提示，可通过以下几种方式实现：

方案一：提交时标记所有表单字段为touched #

这种方式最简洁，只需在提交时将所有表单控件标记为已触碰，触发现有错误提示逻辑。

步骤1：给表单添加模板引用 #

在表单根元素上添加#myForm="ngForm"引用，以便在组件中获取表单实例：

<form #myForm="ngForm">
  <!-- 你的所有表单字段（包括requestorName等） -->
  
  <div class="question">
    <button class="submit col-md-2" (click)="onSubmit(myForm)">Submit</button>
  </div>
</form>

步骤2：修改onSubmit方法 #

在提交时遍历表单控件，标记为touched，再执行验证逻辑：

import { NgForm } from '@angular/forms';

// ...组件类内的方法
onSubmit(form: NgForm) {
  // 标记所有字段为已触碰
  Object.keys(form.controls).forEach(key => {
    form.controls[key].markAsTouched();
  });

  // 执行你的自定义验证
  const validityCheck = this.validateModel(this.model);
  if (!validityCheck.isValid) {
    return; // 验证不通过，终止提交
  }

  // 验证通过，执行表单提交逻辑
  // ...你的提交代码
}

方案二：针对未通过验证的字段单独标记touched #

如果你希望仅标记验证不通过的字段（而非全部），可修改validateModel函数，在发现字段为空时标记对应控件：

修改validateModel方法 #

import { NgForm } from '@angular/forms';

validateModel(accessRequest: AccessRequestModel, form: NgForm) {
  const validityCheck = {
    isValid: true,
    reason: null
  };

  if (accessRequest) {
    if (!accessRequest.requestorName) {
      validityCheck.isValid = false;
      validityCheck.reason = 'Requester name is required.';
      form.controls['requestorName'].markAsTouched();
      return validityCheck;
    } else if (!accessRequest.lname) {
      validityCheck.isValid = false;
      validityCheck.reason = 'Last name is required.';
      form.controls['lname'].markAsTouched();
      return validityCheck;
    } else if (!accessRequest.fname) {
      validityCheck.isValid = false;
      validityCheck.reason = 'First name is required.';
      form.controls['fname'].markAsTouched();
      return validityCheck;
    }
    // ...其余字段的验证逻辑（同理添加markAsTouched）
  }
  return validityCheck;
}

修改onSubmit方法 #

onSubmit(form: NgForm) {
  const validityCheck = this.validateModel(this.model, form);
  if (!validityCheck.isValid) {
    return;
  }
  // 提交逻辑
}

方案三：添加提交状态标记控制错误显示 #

通过添加一个submitted变量，控制错误提示在提交后显示：

步骤1：组件内定义变量 #

submitted = false;

步骤2：修改onSubmit方法 #

onSubmit() {
  this.submitted = true;
  const validityCheck = this.validateModel(this.model);
  if (!validityCheck.isValid) {
    return;
  }
  // 提交逻辑
}

步骤3：修改模板错误提示条件 #

将每个字段的错误提示*ngIf条件添加submitted：

<div *ngIf="requestorName.invalid && (requestorName.dirty || requestorName.touched || submitted)" class="alert">
  <div *ngIf="requestorName.errors?.required">
    <p class="required">Requester name is required.</p>
  </div>
  <div *ngIf="requestorName.errors?.minlength">
    <p class="required">Requester name must be at least 2 characters long.</p>
  </div>
</div>

以上三种方式都能实现提交时显示未触碰字段的错误提示，推荐方案一，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Cole Perry