如何在angular 5中创建一个可以自己倍增并同时添加多个数据的表单

我创建了一个表单，它有两个字段

Name

和

price

。现在添加数据很容易，没有问题。但是我想放置一个

addmore

按钮，当按下该按钮时，会添加一行与上面相同的输入字段，包括

Name

和

price

字段。这必须允许用户一次添加多个数据，在填充数据并按save键后，所有数据必须以相同的顺序添加到数据库中。 我当前的HTML：

添加产品
添加更多
拯救
取消

根据这一点，可以使用

FormArray

进行如下操作

ngOnInit() {
  this.productForm= this.formBuilder.group({
    items: this.formBuilder.array([ this.createItem() ])
  });
}

每个项目组应如下所示

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

并动态添加表单

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

模板呢

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

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

所选名称：{{productForm.controls.items.controls[i].controls.name.value}

我不太明白生成新输入元素的函数位于哪一部分。这正是解决方案，我在我的多个应用程序中使用了它。生成新输入元素的函数是createItem（）函数。您甚至可以向此函数生成的每个输入添加验证程序，如下所示：createItem（）：FormGroup{返回this.formBuilder.group（{name:[未定义，[validators.required，validators.minLength（5），validators.maxLength（40）]，price:[未定义，[validators.required，validators.customValidator1，validators.customValidator2]}。别忘了在yout组件中导入FormArray。另一个建议。让您的组件尽可能保持沉默，将您的http请求放入服务中，甚至更好的是，通过使用ngrx store将您的所有应用程序数据保存在一个真实来源中（redux概念），将您的所有业务逻辑放入Reducer中，进行http调用并处理来自ngrx@Effects的响应，使您的组件更加沉默。这是每个人都应该认真学习的东西，因为它使您的应用程序真正具有可扩展性，对团队工作友好，并且遵循函数式编程的最佳实践。通过这样做，业务逻辑在整个应用程序中变得可重用。