如何用2个数组做FormArray

Question

我想做这样的事情。带角度的FormArray。在名称数组上，在数量数组上。我来做这件事只花了一个时间，却没有来过2：（

如果有人有想法。 ：）

我想这样：

PS：我并未编写所有的测试代码。我只是编写了适用于一个数组的代码。我也写了它，但没有提交按钮以简化代码。

该商品来自我写过的JSON文件

非常感谢您的帮助

page.ts

itemForm: FormGroup;

initForm(array: InfoModel[]) {
  this.infoForm = this.formBuilder.group({
    name: this.formBuilder.array([]),
    quantity: this.formBuilder.array([])
   });
}

onAddMoreItem() {
  const nameControl = this.formBuilder.control(null, Validators.required);
  this.getItemName().push(nameControl);
}

getItemName(): FormArray {
  return this.itemForm.get('name') as FormArray;
}

模板

<form [formGroup]="itemForm" (ngSubmit)="onSave()">
   <div formArrayName="name">
   <h3>Items</h3>
      <div *ngFor="let adControl of getName().controls; let i = index">
        <input type="text" [formControlName]="i">   
      </div>
   <button type="button" (click)="onAddMoreItem()">Add more item</button>
   </div>
</form>

JSON文件

"item": [
   {
     "name" : [ "aaa", "bbb" ],
     "quantity" : [ "130", "60" ]
    }
]

Answer 1

Angular反应性表单旨在与设置的数据模型一起使用。如果您希望表单看起来和表现出所显示的方式，则必须更改数据模型。

您想要的是一个FormArray的{​​{1}}。每个FormGroup将有一个FormGroup name和一个FormControl quantity。

那么可以做的是，您可以转换实际数据以使其准备就绪。并且，如果您希望使用以前的格式的数据，则可以再次将表单数据转换为所需的结构。为此，您必须创建两个转换方法。

这是您要执行的操作：

FormControl

模板看起来像这样：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, FormArray } from '@angular/forms';

interface Item {
  name: Array<string>;
  quantity: Array<string>;
};

interface Data {
  item: Array<Item>;
};

interface FormItem {
  name: string;
  quantity: string;
};

interface FormData {
  data: Array<FormItem>;
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = {
    item: [
      {
        name: ["aaa", "bbb"],
        quantity: ["130", "60"]
      }
    ]
  };

  formData;
  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    const formData = this.transformDataToFormData(this.data);
    this.form = this.fb.group({
      data: this.fb.array(formData.data.map((datum: FormItem) => this.fb.group({
        name: [datum.name],
        quantity: [datum.quantity]
      })))
    });
  }

  onFormSubmit() {
    console.log(this.form.value);
    this.data = this.transformFormDataToData(this.form.value);
  }

  addItem() {
    this.formDataArray.push(this.fb.group({
      name: [],
      quantity: []
    }));
  }

  removeItem(itemIndex: number) {
    this.formDataArray.removeAt(itemIndex);
  }

  private transformDataToFormData(data: Data): FormData {
    return {
      data: data.item[0].name
        .map(
          (name: string, index: number) => ({ name, quantity: data.item[0].quantity[index] }))
    };
  }

  private transformFormDataToData(formData: FormData): Data {
    return {
      item: [{
        name: formData.data.map((datum: FormItem) => datum.name),
        quantity: formData.data.map((datum: FormItem) => datum.quantity),
      }]
    };
  }

  private get formDataArray(): FormArray {
    return (<FormArray>this.form.controls['data']);
  }

}

---

  

这是您推荐的Working Sample StackBlitz。