You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular Reactive Form:FormGroup验证功能失效求解决方案

解决方案

你的验证失效核心原因是控件路径错误:name控件并非直接挂载在dynamicFormGroup根节点下,而是嵌套在address这个FormArray的第i个子FormGroup里,原代码的dynamicFormGroup.get('name')根本找不到对应控件,导致验证逻辑不生效。

步骤1:修正模板中的验证表达式

直接利用循环变量fields(它就是当前子FormGroup实例)来获取控件,替换原有的验证判断:

<div *ngIf="fields.get('name').invalid && (fields.get('name').dirty || fields.get('name').touched)">
    <small class="validation-error">Please provide a title.</small>
</div>

或者通过完整路径获取控件(适合需要显式路径的场景):

<div *ngIf="dynamicFormGroup.get(['address', i, 'name']).invalid && (dynamicFormGroup.get(['address', i, 'name']).dirty || dynamicFormGroup.get(['address', i, 'name']).touched)">
    <small class="validation-error">Please provide a title.</small>
</div>

步骤2:确保FormArray的定义正确

组件中AddressInfo必须是dynamicFormGroup下address字段的FormArray类型断言,否则循环时无法正确获取子控件:

get AddressInfo(): FormArray {
    return this.dynamicFormGroup.get('address') as FormArray;
}

步骤3:确认FormArray的元素创建逻辑

添加新地址项时,必须使用你的createItem方法生成带验证规则的FormGroup,确保每个子项都继承name、email、mobile的必填验证:

addAddressItem() {
    this.AddressInfo.push(this.createItem);
}

完整修正后的模板片段示例

<form [formGroup]="dynamicFormGroup" (ngSubmit)="onSubmit()">
    <div class="row" formArrayName="address" *ngFor="let fields of AddressInfo.controls; let i = index">
        <ng-container [formGroupName]="i">
            <div class="form-group col-md-12">
                <div class="each_content">
                    <label class="labelTitle">Name <span class="validation-error">*</span></label>
                    <input type="text" class="form-control height-reset" placeholder="Enter Name" name="name" formControlName="name" />
                    <!-- 修正后的验证逻辑 -->
                    <div *ngIf="fields.get('name').invalid && (fields.get('name').dirty || fields.get('name').touched)">
                        <small class="validation-error">Please provide a title.</small>
                    </div>
                </div>
            </div>
            <!-- 其他字段(email、mobile)的验证逻辑可以同理修改 -->
        </ng-container>
    </div>
</form>

内容的提问来源于stack exchange,提问作者user3653474

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 02:23:23