TypeScript. FormGroup FormArray - supprime un seul objet élémentaire par valeur. Angular 2 4

Question

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

J'ajoute un nouvel élément de cette façon : this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

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

Mes cours :

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

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

Lorsque j'ai ajouté des images, alors mon {{ formGroup.value | json }} est :

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

Je veux supprimer les images (par exemple, seulement l'image avec id=502 ) de formGroup avant que j'envoie la requête POST de mon formulaire. Est-ce possible ? J'ai essayé d'utiliser reset mais cette méthode supprime tous les éléments : this.images.reset({"id":image.id}); . Où image il s'agit d'un ImageResponse objet.

Résultat : {"images": [ null, null, null ]} mais je veux :

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

Answer 1

FormArray La classe a removeAt qui prend l'index. Si vous ne connaissez pas l'index, vous pouvez faire un contournement :

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

Answer 2

Dans Angular Reactive Forms, formArray a une méthode appelée removeAt() . Vous pouvez l'utiliser en passant un index que vous voulez supprimer :

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

Answer 3

Si vous voulez supprimer la valeur d'une clé particulière du FormGroup, vous pouvez utiliser le code suivant -

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