TypeScript. FormGroup FormArray - remove only one element object by value. Angular 2 4

Question

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

I add new element in this way: this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

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

My classes:

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

When I added images, then my {{ formGroup.value | json }} is:

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

I want to remove images (for example only image with id=502) from formGroup before when I send my form POST request. Is it possible? I tried use reset method, but this remove all elements: this.images.reset({"id":image.id});. Where image it is a ImageResponse object.

Result: {"images": [ null, null, null ]}, but I want:

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

Answer 1

FormArray class has removeAt which takes the index. If you do not know the index, you can do a workaround:

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