如何在Angular中为各类表单控件设置必填验证并提交时校验？

要实现点击「Next」时验证所有必填字段，包括文本框、下拉框、单选框、复选框等，用Angular的模板驱动表单就能搞定，具体步骤如下：

1. 完善HTML模板 #

• 给<form>标签添加模板引用变量#form="ngForm"，用来获取表单实例做验证
• 给下拉框加上required属性，同时把默认选项的value设为空（否则默认选中的选项会被视为有效）
• 移除提交按钮上的routerLink，改成通过组件逻辑控制跳转
• 补充单选框、复选框的必填验证示例（适配你的表单需求）

修改后的HTML代码：

<div class="container tb-10">
  <form #form="ngForm">
    <div>
      <div class="row">
        <h4>Food Stamps (SNAP) / EBT Cards:</h4>
        <div class="form-group">
          <label>Please name the person (whether you or a member of your household) who receives food stamps, and city and state where they are received.</label>
          <div>
            Relationship to you: <input type="text" class="form-control" name="snap_relationship" id="snap_relationship" required placeholder="Relationship to you" [(ngModel)]="formData.snapRelationship">
          </div>

          <div>
            City: <input type="text" class="form-control" name="snap_city" id="snap_city" required placeholder="City" [(ngModel)]="formData.snapCity">
          </div>

          <div>
            <label for="state" class="form-label">State:</label>
            <select class="form-select" aria-label="State" id="state" name="state" required [(ngModel)]="formData.state">
              <option selected value="">Select State...</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>

          <!-- 单选框必填验证示例 -->
          <div class="mt-3">
            <label>Do you receive other benefits?</label>
            <div>
              <input type="radio" name="otherBenefits" value="yes" required [(ngModel)]="formData.otherBenefits"> Yes
              <input type="radio" name="otherBenefits" value="no" required [(ngModel)]="formData.otherBenefits"> No
            </div>
          </div>

          <!-- 复选框必填验证示例（至少选一个） -->
          <div class="mt-3">
            <label>Select household members receiving benefits:</label>
            <div>
              <input type="checkbox" name="householdMembers" value="self" (change)="updateCheckbox('self')"> Myself
              <input type="checkbox" name="householdMembers" value="spouse" (change)="updateCheckbox('spouse')"> Spouse
              <input type="checkbox" name="householdMembers" value="child" (change)="updateCheckbox('child')"> Child
              <div *ngIf="!hasSelectedCheckbox" class="text-danger">Please select at least one member</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <button id="exit" class="btn btn-danger pull-left">Exit</button>
      <button id="submitform" type="button" class="btn btn-primary pull-right" (click)="onSubmit(form)"> Next </button>
    </footer>
  </form>
</div>

2. 组件TS代码处理验证与跳转 #

• 导入ViewChild、NgForm和Router，获取表单实例并处理路由跳转
• 编写提交方法，先验证表单整体有效性，再处理复选框的自定义验证（因为复选框需要至少选一个）
• 验证通过后再跳转到目标页面

修改后的TS代码：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-benefits',
  templateUrl: './benefits.component.html',
  styleUrls: ['./benefits.component.css']
})
export class BenefitsComponent {
  formData: any = {};
  selectedCheckboxes: string[] = [];
  hasSelectedCheckbox = false;

  @ViewChild('form') form!: NgForm;

  constructor(private router: Router) {}

  updateCheckbox(value: string) {
    const index = this.selectedCheckboxes.indexOf(value);
    if (index > -1) {
      this.selectedCheckboxes.splice(index, 1);
    } else {
      this.selectedCheckboxes.push(value);
    }
    this.hasSelectedCheckbox = this.selectedCheckboxes.length > 0;
  }

  onSubmit(form: NgForm) {
    // 验证复选框是否至少选一个
    if (!this.hasSelectedCheckbox) {
      return;
    }
    // 验证整个表单所有必填项
    if (form.invalid) {
      // 触发所有控件的验证提示
      form.control.markAllAsTouched();
      return;
    }
    // 验证通过，跳转到下一个页面
    this.router.navigate(['/referrals']);
  }
}

关键验证说明 #

• 文本框/下拉框：直接加required属性，配合[(ngModel)]实现双向绑定，Angular会自动处理验证状态
• 单选框：同一组单选框用相同的name属性，加required确保必须选中一个选项
• 复选框：需要自定义逻辑记录选中项，判断是否至少选一个，再在模板中展示错误提示

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