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

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

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

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

export class ListA {
    input1 : String
    input2 : number
}

我需要以这样的方式在 UI 上显示它：输入 1、输入 2 和标准映射的键、值作为输入字段可见。用户填写所有 4 个输入字段并单击“添加”按钮。

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

*ngFor不起作用，因为初始列表为空。

假设您正在使用角反应形式，您可以组合使用*ngFor and FormArray。你可以从一个空的开始FormArray并使用动态添加.push() method.

这里有一个很好又详细的例子

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