1. ホーム
  2. angular

タイプスクリプトです。FormGroup FormArray - 値によって1つの要素オブジェクトのみを削除します。アンギュラー 2 4

2023-11-21 16:03:41

質問

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

このように新しい要素を追加していきます。 this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id)));

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

私のクラス

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

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

画像を追加すると、次に私の {{ formGroup.value | json }}

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

画像を削除したい。 id=502 で囲まれている画像のみ)を formGroup を、フォームのPOSTリクエストを送信する前に削除してください。可能でしょうか? 私は reset メソッドを使用しましたが、これはすべての要素を削除してしまいます。 this.images.reset({"id":image.id}); . ここで image であり、それは ImageResponse オブジェクトになります。

結果 {"images": [ null, null, null ]} が、欲しい。

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

どのように解決するのですか?

FormArray クラスには removeAt があり、これはインデックスを取ります。インデックスがわからない場合は、回避策をとることができます。

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