TypeScript. FormGroup FormArray - remove only one element object by value. Angular 2 4
AngularTypescriptAngular Reactive-FormsFormarrayAngular Problem Overview
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
}
]
Angular Solutions
Solution 1 - Angular
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))
Solution 2 - Angular
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)
}
``
Solution 3 - Angular
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)