具有反应形式的 Angular patchValue json 数据

Question

我正在编辑页面，并尝试使用从 API 获得的数据设置表单默认值。

我的问题是我的数组中有两个项目，但它创建了另一个空的 formArray；

我做错了什么？

这是我的 stackblitz

  this.filterForm = this.fb.group({
      categories: this.fb.array([this.initCat()]),
    });

    const control = <FormArray>this.filterForm.get('categories');
    console.log(control);
    this.chosenCarPartCategories.carPartCategories.forEach((x) => {
      control.push(
        this.patchValues(x.name, x.carPartSubCategoryId, x.quantity, x.comment)
      );
    });

  patchValues(name, carPartSubCategoryId, quantity, comment) {
    return this.fb.group({
      carPartCategory: [name],
      carPartSubCategory: [carPartSubCategoryId],
      quantity: [quantity],
      comment: [comment],
    });
  }

  initCat() {
    return this.fb.group({
      carPartCategory: ['', Validators.required],
      carPartSubCategory: ['', Validators.required],
      quantity: ['', Validators.required],
      comment: [''],
    });
  }

Answer 1

很难理解你想在这里做什么，仅供参考。但您描述的问题来自 this.initCat()。

    this.filterForm = this.fb.group({
      categories: this.fb.array([this.initCat()]),
    });

将其删除以删除空的额外表格。

    this.filterForm = this.fb.group({
      categories: this.fb.array([]),
    });