angular - 打字稿。FormGroup FormArray - 按值仅删除一个元素对象。角 2 4

Question

this.formGroup = this.formBuilder.group({
    images: this.fb.array([])
});

我以这种方式添加新元素： this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

get images(): FormArray {
    return <FormArray>this.formGroup.controls.images;
}

我的课程：

export class ImageCreateForm {
    id: number;
    constructor(id: number) {
        this.id = id;
    }
}

export class ImageResponse {
    id: number;
    url: string;
}

当我添加图像时，我{{ formGroup.value | json }}的是：

"images": [
   {
    "id": 501
   },
   {
    "id": 502
   },
   {
    "id": 503
   }
]

我想在发送表单 POST 请求时删除之前的图像（例如仅带有 的图像id=502） 。formGroup是否可以？我尝试了使用reset方法，但这删除了所有元素： this.images.reset({"id":image.id});. 它image是一个ImageResponse对象。

结果：{"images": [ null, null, null ]}，但我想要：

"images": [
   {
    "id": 501
   },
   {
    "id": 503
   }
]

Answer 1

FormArray类有removeAt它采用索引。如果你不知道索引，你可以做一个解决方法：

this.images.removeAt(this.images.value.findIndex(image => image.id === 502))

Answer 2

在 Angular Reactive Forms 中，formArray有一个名为removeAt(). 您可以通过传递要删除的索引来使用它：

delete(index){
    this.array.removeAt(index)
}
``

Answer 3

如果要从 FormGroup 中删除特定键的值，可以使用以下代码 -

this.formGroupF.controls[value].patchValue(null)