Angular表单输入框与下拉选必填校验失效问题排查

我正在创建一个表单，希望所有字段设置为必填项，点击「Next」按钮时必须完成填写才可跳转到下一个表单。已为字段添加required属性，但点击按钮仍直接跳转，未触发必填错误提示，寻求解决方法。

HTML代码 #

<div class="container tb-10">
<form >
    <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>
                    Person Receiving Benefits: <input type="text" class="form-control" name="snap_beneficiary" id="snap_beneficiary" required placeholder="Person Receiving Benefits" >
                </div>

                <div>
                    Relationship to you: <input type="text" class="form-control" name="snap_relationship" id="snap_relationship" required placeholder="Relationship to you" >
                </div>

                <div>
                    City: <input type="text" class="form-control" name="snap_city" id="snap_city" required placeholder="City" >
                </div>

                <div>
                    <label for="state" class="form-label">State:</label>
                    <select class="form-select" aria-label="State" id="state" required>
                        <option selected value=" ">Select State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <button id="exit" class="btn btn-danger pull-left" >Exit</button>
        <button id="submitform" type="submit" class="btn btn-primary pull-right" routerLink ="/referrals" > Next </button>
    </footer>
</form>
</div>

Component.ts代码 #

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

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

  constructor(private router: Router) {}

}

问题根源 #

1. 按钮上的routerLink会让Angular直接执行路由跳转，优先级高于表单的submit事件，完全绕过了原生校验逻辑。
2. 下拉框默认值为空格" "，属于非空字符串，required属性不会判定为未填写。

具体修复步骤 #

1. 移除按钮的routerLink：删除Next按钮上的routerLink="/referrals"，避免直接跳转。
2. 绑定表单提交事件：在<form>标签上添加表单引用和提交事件，改为<form #form="ngForm" (ngSubmit)="onSubmit(form)">。
3. 给表单字段添加ngModel：所有输入框和下拉框需要添加ngModel指令，才能让Angular识别表单控件的状态。
4. 修复下拉框默认值：将默认选项的value=" "改为value=""，确保required能正确触发。
5. 在组件中实现校验逻辑：编写onSubmit方法，检查表单有效性，有效时再执行路由跳转。

修改后的代码 #

HTML代码

<div class="container tb-10">
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <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>
                    Person Receiving Benefits: <input type="text" class="form-control" name="snap_beneficiary" id="snap_beneficiary" required placeholder="Person Receiving Benefits" ngModel>
                </div>

                <div>
                    Relationship to you: <input type="text" class="form-control" name="snap_relationship" id="snap_relationship" required placeholder="Relationship to you" ngModel>
                </div>

                <div>
                    City: <input type="text" class="form-control" name="snap_city" id="snap_city" required placeholder="City" ngModel>
                </div>

                <div>
                    <label for="state" class="form-label">State:</label>
                    <select class="form-select" aria-label="State" id="state" required name="state" ngModel>
                        <option selected value="">Select State...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <button id="exit" class="btn btn-danger pull-left">Exit</button>
        <button id="submitform" type="submit" class="btn btn-primary pull-right">Next</button>
    </footer>
</form>
</div>

Component.ts代码

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

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

  constructor(private router: Router) {}

  onSubmit(form: NgForm) {
    // 表单校验通过后再跳转
    if (form.valid) {
      this.router.navigate(['/referrals']);
    }
  }
}

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