Cannot assign FormArray

Question

just started with learning of Angular and stacked with a problem. I want to create add/remove textfields for the form, therefore I tried the following code in my component.ts file:

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

So, this how import looks like and then

  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());
  }

And here is 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>

Problem is, that I got mistakes with items. Specifically here

addItem():

I recieve message, that this is unused method, and for

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

I got Type FormArray is not assignable to type any[]. Property "includes" is missing in type FormArray

And with HTML form I recieve some Identifier 'controls' is not defined

Maybe there is another way to make what I want, but for now cant see how to deal with it.

Lia · Accepted Answer · 2018-05-07 13:32:13Z

1

you should change the items type: items: FormArray ;

and in ngOnInit():

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

update: there was errors in code i resolved them and updated:

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>

edited May 7, 2018 at 13:32

answered May 7, 2018 at 12:06

Lia

12k3 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mdguit Over a year ago

Seemingly works, at least removed the errors in component.ts file, but still the same in html. Probably another source of problem? Anyway, thank you much!

Collectives™ on Stack Overflow

Cannot assign FormArray

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related