Angular 反应式表单数组-在推送新元素时避免验证错误

我有一个由单个表单数组组成的表单组：

ngOnInit（）{
this.deviceDetailsFormGroup=此。\ u formBuilder.group({
设备详细信息：此。\u formBuilder.array([
this.buildDeviceDetailsForm（）
])
});
}

表单数组中的每个控件都需要验证程序：

buildDeviceDetailsForm（）：FormGroup{
返回此。\u formBuilder.group({
ipAddressCtrl:[
"",
[Validators.pattern（ipaddressPattern），Validators.required]
],
hostnameCtrl:[
"",
[
需要验证器，
验证器。最大长度（30），
验证器。最小长度（5）
]
]
});
}

以下是我对表单数组的推送和删除功能：

addNewDevice（）{
this.deviceItems=this.deviceDetailsFormGroup.get(
“设备细节”
)作为正式协议；
如果（this.deviceItems.length>MAX_DEVICES）{
this.toastNotif.errorToastNotif(
`单个作业扫描最多可选择${MAX_DEVICES}个设备`，
“选择的设备太多”
);
返回；
}
if（this.deviceDetailsFormGroup.invalid）{
返回；
}
设mapIP=new Map（）；
//警告表单中存在重复的IP
this.deviceItems.controls.forEach（ctrl=>{
如果（mapIP[ctrl.value.ipAddressCtrl]==0）{
这是。toastNotif。warningToastNotif(
“您在表单字段中输入了重复的IP”，
“重复”+“IP”
);
}
mapIP[ctrl.value.ipAddressCtrl]=0；
});
this.deviceItems.push（this.buildDeviceDetailsForm（））；
}
移除设备（i:编号）{
this.deviceItems.removeAt（this.deviceItems.length-1）；
}

当我将新元素推送到表单数组中时，它们被标记为无效，尽管它们未被触及且原始。我知道这是由我创建新的

FormGroup

时设置的验证器和空默认值造成的

是否有可能避免这种行为，以便仅当触摸到

FormArray

元素时才将其标记为错误

---

提前感谢。

卢卡，FormArray中的formControl总是无效的，因此FormArray无效，表单也无效。你需要检查一下控制器是否被触动了。中的一个简单示例。您可以看到，如果添加，则控件无效，但未被触碰

html是一种典型的格式

<button (click)="add()">Add</button>
<form [formGroup]="myForm">
<div formArrayName="myFormArray">
  <div *ngFor="let group of myFormArray.controls;let i=index" [formGroupName]="i">
       <input formControlName="name">
       <!--show only after touched and invalid-->
       <div *ngIf="group.get('name').touched && group.get('name').invalid">
         invalid and touched
       </div>
       <!--show always when add a new formGroup to array-->
       <div *ngIf="group.get('name').invalid">
         invalid 
       </div>
  </div>
  </div>
  </form>

---

我有一个非常相似的情况，每当我在我的

formArray

中添加一个新的

formGroup

时，它的验证就会被触发，即使它们是

未被触及的
&
原始的
。如果使用按钮动态添加
formGroups
，则会将操作默认为提交事件，如果未指定按钮类型，则会触发运行验证

添加
type=“button”
解决了该问题。
您尝试过吗？请提供stackblitz！谢谢你的回答，这为我指明了正确的方向。正确的回答，成功了……谢谢！正是我要找的！
myForm=new FormGroup({
     myFormArray:new FormArray([])
  })

  get myFormArray()
  {
    return this.myForm.get('myFormArray') as FormArray
  }
  createGroup()
  {
    return new FormGroup({
      name:new FormControl('',Validators.required)
    })
  }
  add()
  {
    this.myFormArray.push(this.createGroup())
  }