TypeScript. FormGroup FormArray - 根据值仅删除一个元素对象。Angular 2 4

Question

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

我想在发送表单POST请求之前从formGroup中删除图片（例如仅使用id = 502的图像）。这可能吗？我尝试使用reset方法，但这会删除所有元素：this.images.reset({"id":image.id});其中image是一个ImageResponse对象。

结果：{"images": [ null, null, null ]}，但我需要：

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

- user7337867

Answer 1

FormArray类有removeAt方法，该方法需要传入索引。如果您不知道索引，可以使用一个解决方法：

// 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)

- AT82

---

正确从FormArray中删除元素的方法是：不要使用formArray.controls[i].splice - 这会将控件从数组中删除，但控件的值仍将保留在FormArray控件的values数组中。 - Chris Halcrow

Answer 2

在Angular响应式表单中，formArray有一个叫做removeAt()的方法。你可以通过传递要删除的索引来使用它：

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

- Amit Singh

Answer 3

如果你想从FormGroup中删除特定键的值，你可以使用以下代码 -

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

- surajmall

---

这样，您正在为表单的值字段设置 null。但是，如果您真的想完全删除一个元素，可以这样做。this.form.removeControl('value');我经常在单元测试中使用这种方式，这些测试有像这样的行this.form.get('value')?.value - Julio Cesar Brito Gomes

Answer 4

有两种情况下，您可能不想为表单控件发送值。

1. 如果您有一个值并且想在发布之前删除它

   this.form.removeControl('controlname');      
   

2. 如果您的模型验证在发布后失败，但您仍然希望该控件出现在表单中。在这种情况下，您只能将此字段的值初始化为undefined。这样它就不会与formdata值一起发布。

   this.formBuilder.group({    
      name: ['', [Validators.required],
      imageUrl: [undefined, []],
   });
   

- jagjeet