在响应式表单中从下拉列表中选择另一个值后清除 FormArray Angular 4

Question

我有一个问题，因为我需要先 select 一个仓库才能看到原料。我的问题是，当我尝试更改另一个仓库时，我该如何清除表格数组或整个表格，因为每个仓库都有不同的成分集？我试图这样做 this.form = new FormGroup({}) 但它破坏了订阅。我怎样才能做到这一点？下面是我的代码。

constructor(private fb: FormBuilder,
            private stocksRequestService: StocksRequestService,
            private warehouseService: WarehouseService) { 

    this.form = new FormGroup({});

            this.form.setControl('ingredients', new FormArray([]));
            this.ingredientsFormArray = <FormArray>this.form.controls['ingredients'];
        }

    ngOnInit() {
            this.getAllWarehouse();

            this.subscription = this.route.params
            .subscribe((params: Params) => {
                this.id = +params['id'];
                this.stocksRequestService.getStockRequest(this.id)
                .subscribe(
                    (data:any) => {
                        this.request = data[0];
                        console.log(data);

                    },
                    error => {
                        console.log(error);
                        alert("ERROR");
                    })
            });



        }

        initializeForm() {
            this.initializeIngredientsFormArray();
        }

        initializeIngredientsFormArray() {
            this.request2.delivery_items.forEach(ingredient => {
                this.ingredientsFormArray.push(new FormGroup({
                    id: new FormControl(ingredient.id),
                    sku: new FormControl(ingredient.ingredient.SKU),
                    name: new FormControl(ingredient.ingredient.name),
                    requested_qty: new FormControl(ingredient.request_quantity),
                    approved_qty: new FormControl(ingredient.approved_quantity),
                    available_approved_qty: new FormControl(ingredient.approved_quantity - ingredient.delivered_quantity),
                    unit: new FormControl(ingredient.unit.name),
                    quantities: new FormArray([]),
                }));
                console.log(this.ingredientsFormArray);

                const ingredientForm = <FormGroup>this.ingredientsFormArray.controls[this.ingredientsFormArray.length-1];
                const singleIngredientFormArray = <FormArray>ingredientForm.controls['quantities'];
                ingredient.ingredient.warehouse_items.forEach(element => {
                    singleIngredientFormArray.push(this.initializeSingleQuantityForm(element));

                });
            });
        }

        initializeSingleQuantityForm(quantity: any): FormGroup {
            return new FormGroup({
                warehouse_item_id: new FormControl(quantity.id),
                unit_id: new FormControl(quantity.unit),
                ingredient_id: new FormControl(quantity.ingredient_id),
                expiration_date: new FormControl(quantity.expiration_date),
                available_warehouse_qty: new FormControl(quantity.available_stocks),
                transfer_qty: new FormControl('', [Validators.required]),
            });
        }

        onSelectWarehouse(event): void {
            const formData = {
                warehouse_id: event.target.value,
                request_stock_id: this.id
            }
            console.log(formData);
            this.warehouse_id =  event.target.value
            this.subscription = this.stocksRequestService.selectIngredient(formData)
            .subscribe(
                (data:any) => {
                    this.request2 = data.requestStock[0];
                    console.log(data); 

                    // HOW TO CLEAR FORM ARRAY HERE

                    this.initializeForm(); 


                },
                error => {
                    alert("Error! Can't Select Warehouse");
                    console.log(error); 
                })
        }

        getAllWarehouse() {
            this.subscription = this.warehouseService.getAll()
            .subscribe(
                (data:any) => {
                    this.warehouses = data.warehouses;
                    console.log(data);
                },
                error => {
                    console.log(error);
                });
        }

Answer 1

您可以调用this.form.reset()清除表格。为了在保持订阅的同时从 FormArray 中删除所有内容，您可以逐个删除元素：

resetFormArray = (formArray: FormArray) => {
    while (formArray.length !== 0) {
        formArray.removeAt(0)
    }
}

Answer 2

您可以通过执行以下操作使您的 formarray 为空

const arr = <FormArray>this.form.controls.ingredients;
      arr.controls = [];