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
   }
]

rofrol · Accepted Answer · 2023-04-19 16:36:03Z

239

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

// findIndex returns -1 if not found
// `removeAt` wraps around from the back if given negative
const index = this.images.value.findIndex(image => image.id === 502)
if(index !== -1) this.images.removeAt(index)

edited Apr 19, 2023 at 16:36

rofrol

15.4k8 gold badges88 silver badges86 bronze badges

answered Oct 14, 2017 at 11:53

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Halcrow Over a year ago

This is the correct way to remove from a FormArray. Don't use formArray.controls[i].splice - that will remove the control from the array but the control values will remain on the values array of the FormArray control.

Jared Forth · Accepted Answer · 2020-07-07 17:21:06Z

23

In Angular Reactive Forms, formArray has a method called removeAt(). You can use it by passing an index that you want to delete:

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

edited Jul 7, 2020 at 17:21

Jared Forth

1,6476 gold badges21 silver badges35 bronze badges

answered Jul 7, 2020 at 12:38

Amit Singh

2992 silver badges7 bronze badges

Comments

jagjeet · Accepted Answer · 2020-07-24 11:40:25Z

0

There are two different cases where you may don't want to send value for a formcontrol.

In case you have a value for that and want to remove before post
```
this.form.removeControl('controlname');      
```
If you model validation is failing after posting but you still want that control in your form. In this case you can only initialize this field value as undefined. This way it will not post along with formdata values.
```
this.formBuilder.group({    
   name: ['', [Validators.required],
   imageUrl: [undefined, []],
});
```

answered Jul 24, 2020 at 11:40

jagjeet

3774 silver badges13 bronze badges

Comments

surajmall · Accepted Answer · 2021-05-13 12:07:25Z

0

if you want to remove a value for a particular Key from the FormGroup, You can use following code -

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

answered May 13, 2021 at 12:07

surajmall

2062 silver badges7 bronze badges

1 Comment

Julio Cesar Brito Gomes Over a year ago

That way you are setting null for the value field of the form. But if you really want to remove an element completely, you can do it this way. this.form.removeControl('value'); I often use this for unit tests that have lines like these this.form.get('value')?.value

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related