Angular响应式表单输入验证实现及校验失效问题排查

你的表单验证功能失效的核心原因是：模板中直接使用firstName、lastName这类控件变量，但这些控件属于嵌套的deliveryAddress表单组，组件类中未暴露对应的属性，导致模板无法正确访问控件的状态（invalid、dirty等）。

修复步骤 #

1. 在组件类中添加嵌套控件的Getter

在组件类里定义Getter方法，让模板可以简洁地访问嵌套表单组和控件：

import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

// 组件类中新增以下代码
get deliveryAddress() {
  return this.checkoutForm.get('deliveryAddress') as FormGroup;
}

get firstName() {
  return this.deliveryAddress.get('firstName') as FormControl;
}

get lastName() {
  return this.deliveryAddress.get('lastName') as FormControl;
}

get phone() {
  return this.deliveryAddress.get('phone') as FormControl;
}

2. 修正模板中的验证逻辑并补全Phone字段提示

原模板中的控件状态判断现在可以正常工作，同时给Phone字段补上缺失的错误提示：

<div formGroupName="deliveryAddress">
  <div class="row mb-4">
    <div class="col mb-4">
      <label class="form-label">First Name</label>
      <input id="firstName" class="form-control fw-bold" type="text" formControlName="firstName"
        (change)="saveToDataStore()">

      <div *ngIf="firstName.invalid && (firstName.dirty || firstName.touched)" class="alert alert-danger">
        <div *ngIf="firstName.hasError('required')">
          First Name is required.
        </div>
      </div>
    </div>

    <div class="col mb-4">
      <label class="form-label">Last Name</label>
      <input id="lastName" class="form-control fw-bold" type="text" formControlName="lastName"
        (change)="saveToDataStore()">

      <div *ngIf="lastName.invalid && (lastName.dirty || lastName.touched)" class="alert alert-danger">
        <div *ngIf="lastName.hasError('required')">
          Last Name is required.
        </div>
      </div>
    </div>
  </div>

  <div class="row mb-4">
    <div class="col">
      <label class="form-label">Phone Number</label>
      <input id="phone" class="form-control fw-bold" type="phone" formControlName="phone"
        (change)="saveToDataStore()">
      <!-- 补全Phone字段的错误提示 -->
      <div *ngIf="phone.invalid && (phone.dirty || phone.touched)" class="alert alert-danger">
        <div *ngIf="phone.hasError('required')">
          Phone Number is required.
        </div>
      </div>
    </div>
  </div>
</div>

可选：直接在模板中通过表单路径访问

如果不想添加Getter，也可以直接在模板中通过表单组路径获取控件状态（写法较冗长，不推荐）：

<div *ngIf="checkoutForm.get('deliveryAddress.firstName')?.invalid && (checkoutForm.get('deliveryAddress.firstName')?.dirty || checkoutForm.get('deliveryAddress.firstName')?.touched)" class="alert alert-danger">
  <div *ngIf="checkoutForm.get('deliveryAddress.firstName')?.hasError('required')">
    First Name is required.
  </div>
</div>

额外提示 #

• 提交表单时若要触发全表单验证，可调用this.checkoutForm.markAllAsTouched()，强制所有必填项显示错误提示。

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