formcontrol - formgroup angular

Mecanografiado. FormGroup FormArray: elimina solo un objeto de elemento por valor. Angular 2 4

Question

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

Agrego un nuevo elemento de esta manera: this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

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

Mis clases:

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

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

Cuando agregué imágenes, entonces mi {{ formGroup.value | json }} {{ formGroup.value | json }} es:

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

Quiero eliminar las imágenes (por ejemplo, solo la imagen con id=502 ) de formGroup antes cuando envío mi solicitud POST del formulario. ¿Es posible? Intenté usar el método de reset , pero esto elimina todos los elementos: this.images.reset({"id":image.id}); . Donde la image es un objeto ImageResponse .

Resultado: {"images": [ null, null, null ]} , pero quiero:

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

Answer 1

FormArray clase FormArray tiene removeAt que toma el índice. Si no conoce el índice, puede hacer una solución:

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