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

Question

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

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

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

export class ListA {
    input1 : String
    input2 : number
}

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

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

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

Answer 1

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

这是一个good and detailed example

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