Question

在serever中的angular 5项目我必须重复多项目以保存在数据库中..

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

我需要一个按钮，当按下添加另一个输入供用户添加另一项我几乎完成但我不知道我怎么能保持输入togeter我尝试somthing链接这但它不工作你能告诉我我该如何解决这个问题？

我的组件：

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]并使用响应式表单设置。

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

1 个答案: