Angular模板驱动表单下拉框required验证失效问题求助

问题场景 #

在Angular模板驱动表单中，为select下拉菜单添加了required验证规则，但即使选择了有效选项，表单仍会显示“State is required”错误，并为下拉菜单添加is-invalid类。

相关代码 #

HTML视图片段：

<div class="form-group">
    <label for="inputState" class="form-label fw-bold">State <span class="required">*</span></label>
    <div id="inputState" class="select-box">

        <!-- select input start -->
        <select class="form-control" name="state" #state="ngModel" [(ngModel)]="form.shippingAddress.state" [ngClass]="{'is-invalid': f.submitted &amp;&amp; state.errors}" required>
            <option value="none">---Select---</option>
            <option *ngFor="let state of states" [value]="state.id">{{ state.name }}</option>
        </select>
        <!-- select input end -->

        <!-- validation start -->
        <div
            *ngIf="f.submitted &amp;&amp; state.errors"
             class="invalid-feedback"
        >
             <div *ngIf="state.errors['required']">
                   State is required
             </div>
        </div>
        <!-- validation end -->

    </div>
</div>

组件TS代码：

export class theDemoComponent implements OnInit {
    form = {
        shippingAddress: {
            state: "none",
        },
    };

    states: object[] = [
        { id: 1, name: "DC" },
        { id: 2, name: "VA" },
        { id: 3, name: "MD" },
        { id: 4, name: "WA" },
    ];

    ngOnInit(): void {}

    onSubmit(): void {
        console.log(JSON.stringify(this.form, null, 2));
    }
}

问题原因 #

1. 模板变量名冲突：select元素的ngModel引用变量#state="ngModel"与*ngFor循环变量let state of states同名，导致模板中无法正确访问ngModel的验证状态对象。
2. 默认选项值不符合required验证逻辑：默认选项的value设为"none"，组件初始值也为"none"，而Angular的required验证仅将null、undefined或空字符串视为无效值，"none"作为非空字符串会被判定为有效，导致验证逻辑不符合预期。

解决方案 #

方案1：修复变量名冲突 #

将select的ngModel引用变量名修改为与循环变量不同的名称（比如#stateCtrl="ngModel"），并同步更新验证逻辑中的变量引用：

<div class="form-group">
    <label for="inputState" class="form-label fw-bold">State <span class="required">*</span></label>
    <div id="inputState" class="select-box">
        <select class="form-control" name="state" #stateCtrl="ngModel" [(ngModel)]="form.shippingAddress.state" [ngClass]="{'is-invalid': f.submitted && stateCtrl.errors}" required>
            <option value="none">---Select---</option>
            <option *ngFor="let state of states" [value]="state.id">{{ state.name }}</option>
        </select>
        <div *ngIf="f.submitted && stateCtrl.errors" class="invalid-feedback">
             <div *ngIf="stateCtrl.errors['required']">State is required</div>
        </div>
    </div>
</div>

方案2：调整默认选项与初始值适配required验证 #

将默认选项的value设为空字符串，同时修改组件初始值为空，让required验证能正确识别未选择的状态：

1. 修改HTML默认选项：

<option value="">---Select---</option>

2. 修改组件初始值：

form = {
    shippingAddress: {
        state: "",
    },
};

必要补充：确保表单正确绑定 #

确认表单元素已添加#f="ngForm"和(ngSubmit)事件绑定，否则f.submitted无法正确触发：

<form #f="ngForm" (ngSubmit)="onSubmit()">
  <!-- 表单内容 -->
  <button type="submit">提交</button>
</form>

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