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
相关产品推荐
相关产品推荐

