如何在Angular 6中动态添加输入字段

Question

我需要将输入字段添加到对象数组和地图中，这些数组和地图会根据用户的选择动态增长。

例如，InputForm有一个列表和一个地图，需要由用户填写。

export class InputForm {
  mapA: {};
  listA: ListA[] = [];
}

export class ListA {
    input1 : String
    input2 : number
}

我需要以这样的方式在UI上显示它：input1，input2和criteria map中的key、value作为输入字段可见。用户填写所有4个输入字段并单击添加按钮。

然后，对于第二个输入，用户应该可以再次编辑相同的输入字段。这样他就可以构建列表和映射，并且当他单击提交按钮时，数组和映射应该在之前填充所有值。

由于初始列表为空，所以 *ngFor 不起作用。

- user1298426

Answer 1

假设您正在使用Angular Reactive Form，则可以结合使用*ngFor和FormArray。您可以从空的FormArray开始，并使用.push()方法动态添加。

这里是一个好的详细示例。

// order-form.component.ts:

@Component({
  selector: '...',
  templateUrl: './order-form.component.html'
})
export class OrderFormComponent implements OnInit{
  orderForm: FormGroup;
  items: FormArray;

  constructor(private formBuilder: FormBuilder) {}
  ngOnInit() {
    this.orderForm = this.formBuilder.group({
      customerName: '',
      email: '',
      items: this.formBuilder.array([ this.createItem() ])
    });
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      description: '',
      price: ''
    });
  }

  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
}

<!-- order-form.component.html -->

<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>

- Faruq

---

ERROR Error: formArrayName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). - ChumiestBucket