Angular 5 добавить вход динамически и отправить несколько элементов на сервер

Question

Угловой 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] здесь с настройкой реактивной формы.