如何动态地添加输入字段中的角6

Question

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

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

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

export class ListA {
    input1 : String
    input2 : number
}

我需要表现出来的UI在输入1，输入2和关键，价值标准地图是作为输入字段可见这样的方式。用户填写所有4个输入字段，并点击添加按钮。

然后再同样输入字段应该是可编辑的用户为第二输入。这样，他可以建立列表和地图，他点击时就提交按钮阵列和地图应该具有的所有填充前值。

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

Answer 1

假设你使用的角度反应形式，你可以使用*ngFor和FormArray的组合。你可以用一个空FormArray启动和动态添加使用.push()方法。这里是一个很好的和详细的例子https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/

订单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());
}

}

订单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>
...