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]。