嵌套数组的角PatchValue

Posted 2021-04-03

我想在另一个数组内修补一个数组的值，我可以通过使用它来实现

this.myForm.value.array1[index1].array2[index2].type = type;

尽管它不会仅在代码中的表单值中更新屏幕上的表单值，但我在下面的代码中修补了第一个数组中的值，并且它在屏幕上更新了值，我只是无法将其编写为能够到达第二个数组

(<FormArray>this.myForm.controls['array1']).at(index1).get("type").patchValue(type);

感谢：）

答案

如果不使用setValue，则Angular会更改值但不反映在输入中，并且不要将输入标记为已触摸...

所以

((this.myForm.get('array1') as FormArray)
       .at(index1).get('array2') as FormArray)
       .at(index2).get("type").patchValue(type);

或

this.form.get('array1.'+index1+'.array2.'+index2+'.type').patchValue(type)

NOTE1：使用get访问数组的元素是array1.index的方式，因此array1.0获取数组的第一个元素，array1.1获取第二个元素...

注意2：建议使用方法get（name）vs controls [name]

Update我不知道您的要求，但是如果您想简单地控制对象数组的数组，则可以使用FormGroups的FormArrays的FormArray。

嗯，有些喜欢

formArray=new FormArray([
      new FormArray([
        new FormGroup({
           type:new FormControl('uno')
        }),
        new FormGroup({
           type:new FormControl('dos')
        }),
      ]),
      new FormArray([
        new FormGroup({
           type:new FormControl('tres')
        }),
        new FormGroup({
           type:new FormControl('cuatro')
        }),
      ])
    ]) 

可以作为html管理

<div *ngFor="let array of form.controls">
  <div *ngFor="let group of array.controls" [formGroup]="group">
    <input formControlName="type">
  </div>
</div>

在这种情况下使用

(this.form.at(0) as FormArray).at(1).get('type').patchValue('new');

请参见stackblitz