Angular表单校验拦截实现：未通过校验禁止跳转至下一页

我是Angular新手，正在开发这部分代码，需要实现错误拦截功能，确保表单必填选项校验通过后，才允许提交或跳转到下一页。以下是我的现有代码：

veteran.html #

<div class="container">
<h4>退伍军人</h4>
<form (ngSubmit)="onSubmit(veteranForm)" #veteranForm="ngForm">
    <div class="row">
        <div class="form-group">
            <label for="veteran">您是退伍军人吗？</label><br>
            <input type="radio" name="veteran" required  value="Y" #veteran ngModel> Yes&nbsp;&nbsp;
            <br>
            <input type="radio" name="veteran" required  value="N" #veteran ngModel> No&nbsp;&nbsp;
        </div>

        <div> 
            <small>
                请在提交表单前点击上方任一选项按钮！
            </small>
        </div>
    </div>
    <pre></pre>
    <footer>
        <button id="exit" class="btn btn-danger" >Exit</button>
        <button type="submit" class="btn btn-primary"  (click)="navigateIfYes(veteran.checked)"> Next </button>
    </footer>
</form>

veteran.ts #

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
   selector: 'app-veteran',
   templateUrl: './veteran.component.html',
   styleUrls: ['./veteran.component.css']
})
export class VeteranComponent {

   constructor(private router: Router) {}

   ngOnInit(): void {}


   navigateIfYes(value: boolean) {
     this.router.navigateByUrl(!!value ? "/veteran-snap" : "/snap");
   }

   onSubmit(form: NgForm){
    console.log(form);
   }

 }

1. 模板层修改要点 #

• 移除重复的模板引用变量#veteran：两个单选框共用同一变量会导致取值异常，直接通过表单控件veteranForm.controls['veteran']获取值即可
• 移除提交按钮上的(click)事件：避免和ngSubmit冲突，统一在onSubmit方法中处理导航逻辑
• 利用表单invalid状态禁用提交按钮，直观提示用户完成必填项
• 新增校验错误提示，提升用户体验

修改后的veteran.html：

<div class="container">
<h4>退伍军人</h4>
<form (ngSubmit)="onSubmit(veteranForm)" #veteranForm="ngForm">
    <div class="row">
        <div class="form-group">
            <label for="veteran">您是退伍军人吗？</label><br>
            <input type="radio" name="veteran" required value="Y" ngModel> Yes&nbsp;&nbsp;
            <br>
            <input type="radio" name="veteran" required value="N" ngModel> No&nbsp;&nbsp;
            <!-- 校验不通过时显示错误提示 -->
            <div *ngIf="veteranForm.controls['veteran']?.invalid && veteranForm.controls['veteran']?.touched" style="color: red;">
                请选择是否为退伍军人
            </div>
        </div>
    </div>
    <pre></pre>
    <footer>
        <button id="exit" class="btn btn-danger">Exit</button>
        <!-- 表单无效时禁用提交按钮 -->
        <button type="submit" class="btn btn-primary" [disabled]="veteranForm.invalid"> Next </button>
    </footer>
</form>

2. 组件类修改要点 #

• 移除不必要的导入：模板驱动表单无需FormGroup、FormControl等响应式表单类，仅保留NgForm即可
• 在onSubmit方法中判断表单有效性，仅当校验通过时执行导航逻辑

修改后的veteran.ts：

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

@Component({
   selector: 'app-veteran',
   templateUrl: './veteran.component.html',
   styleUrls: ['./veteran.component.css']
})
export class VeteranComponent {

   constructor(private router: Router) {}

   onSubmit(form: NgForm){
    // 表单有效时才执行导航
    if(form.valid) {
      const isVeteran = form.value.veteran === 'Y';
      this.router.navigateByUrl(isVeteran ? "/veteran-snap" : "/snap");
    }
   }
 }

核心逻辑说明 #

• 模板驱动表单通过required属性实现必填校验，表单valid状态会自动根据控件校验结果更新
• 提交按钮通过[disabled]="veteranForm.invalid"绑定，表单无效时按钮不可点击，从源头拦截无效提交
• 在onSubmit方法中二次判断form.valid，作为兜底保障，确保只有校验通过的表单才会触发导航

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