Невозможно назначить FormArray

Question

только начал изучать Angular и столкнулся с проблемой. Я хочу создать / удалить текстовые поля для формы, поэтому я попробовал следующий код в моем файле component.ts:

import {FormBuilder, FormGroup, FormArray } from '@angular/forms';

Итак, как выглядит импорт, а затем

  nameForm: FormGroup;
  formBuilder: FormBuilder;
  items: any[] = [];

  createItem(): FormGroup {
    return this.formBuilder.group({
      name: '',
      manufacture_date: ''
    });
  }
  ngOnInit() {
    this.nameForm = this.formBuilder.group({
      Name: ''
      items: this.formBuilder.array([ this.createItem() ])
    });
  }

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

А вот и HTML

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

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

Проблема в том, что я получил ошибки с предметами. Конкретно здесь

addItem():

Я получаю сообщение, что это неиспользуемый метод , а для

this.items = this.nameForm.get('items') as FormArray;

Я получил Тип FormArray не может быть назначен для типа any []. Свойство «include» отсутствует в типе FormArray

А с HTML-формой я получаю Идентификатор 'control' не определен

Возможно, есть другой способ сделать то, что я хочу, но пока не вижу, как с этим справиться.

Answer 1

Вы должны изменить тип предметов: items: FormArray ;

и в ngOnInit ():

{
    this.nameForm = this.formBuilder.group({
      Name: ''
      items: this.formBuilder.array([ this.createItem() ])
    });
this.addItem()
  }

Обновление: в коде были ошибки, я их исправил и обновил:

nameForm: FormGroup;
items: FormArray;
constructor(public formBuilder: FormBuilder){}

ngOnInit() {
    this.items = new FormArray([new FormControl('name'), new FormControl('manufacture_date')]);
    this.nameForm = new FormGroup({
        items: this.items
    });

    this.addItem();
    console.log(this.nameForm)
    console.log(this.items.controls);
}

addItem(): void {
    this.items = this.nameForm.get('items') as FormArray;
    this.items.push(new FormControl('name'));
    this.items.push(new FormControl('manufacture_date'));
}

HTML:

<div [formGroup]="nameForm">
    <div formArrayName="items">
        <div *ngFor="let item of items.controls; index as i">
            <input [formControlName]="i">
            {{item.value}}
        </div>
    </div>
</div>