angular - angular 5动态添加输入并将多个项目发送到服务器

Question

服务器中的 Angular 5 项目我必须接收多个项目以保存在数据库中..

在角度方面，我试图创建一个表单来传递多个项目......

当按下添加另一个输入供用户添加另一个项目时我需要一个按钮我几乎完成但我不知道如何保持输入在一起我尝试了一些链接但它不起作用你能告诉我我该如何解决这个问题吗？

我的组件：

export class RequirementFormComponent implements OnInit {

  private requirment: Requirement;
  orderForm: FormGroup;
  items: FormArray;

  constructor(private form: FormDataService, private formBuilder: FormBuilder, private router: Router) {
  }

  ngOnInit() {
    this.requirment = this.form.getRequirment();

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

  }

  addItem(): void {
    this.items = this.orderForm.get('items') as FormArray;
    this.items.push(this.createItem());
  }
}
  createItem(): FormGroup {
return this.formBuilder.group({
  item: '',
});

}

html：

<ul class="eff">
  <li>
    <div>
      <form [formGroup]="orderForm"  class="editForm" novalidate>
        <div class="input-field" *ngFor="let item of orderForm.get('items').controls; let i = index;">

          <input class="form-control" formControlName="items" [ngModel]="item"
                 type="text"  maxlength="50">
        </div>

      </form>
    </div>
  </li>
</ul>

Answer 1

您的 formGroup 的结构如下：（这不是 Javascript 代码）

orderForm = FormGroup({
    items: FormArray([
       [0] : FormGroup({item: FormControl}),
       [1] : FormGroup({item: FormControl})
    ])
})

所以你的模板应该反映相同的结构

  <form [formGroup]="orderForm" novalidate>
    <div formArrayName="items" *ngFor="let item of orderForm.get('items').controls; let i = index;">
      <div [formGroupName]="i">
          <input formControlName="item" type="text">
      </div>
    </div>
  </form>

要获得该值，您可以这样做this.orderForm.value，这意味着您不需要 [ngModel] 在这里设置反应式表单。