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

Question

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

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

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

export class ListA {
    input1 : String
    input2 : number
}

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

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

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

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>