Angular formarray push formgroup

Question

Showing me error "TypeError: control.setParent is not a function" every time when try something like this....goal is to get answers('odgovori' FormArray) but not to loop on input but in radio group... than user select radio button as correct answer and store all. When do:

console.log(this.odgovorForm.value)

everything show ok but when push then show error

get odgovori() {
    return this.pitanjeForm.get('odgovori') as FormArray;
  }

 pitanjeForm = this.fb.group({
    data: ['', [Validators.required]],
    odgovori: this.fb.array([]),
    tacan: ['', [Validators.required]]
  });

  odgovorForm = this.fb.group({
    data: ['', [Validators.required]],
    color: 'danger'
  });

  addAnswer(): void {
    console.log(this.pitanjeForm.value, this.odgovorForm.value);
    this.info = this.odgovorForm.value;
    this.odgovori.push(this.info);
  }

HTML

<form [formGroup]="pitanjeForm">
 <div>
   <input formControlName="data">
 </div>
  <form [formGroup]="odgovorForm">
    <input formControlName="data">
    <button (click)="addAnswer()"></button>
  </form>
 <div *ngFor="let odgovor of odgovor.value; index as i">
   <input type="radio" value="{{ i }}"> 0 - 30<br>
 </div>
</form>

urosbelov · Accepted Answer · 2019-06-10 07:10:35Z

6

Oh..my mistake

addAnswer(): void {
 this.odgovori.push(this.odgovorForm)
}

TO PUSH FORMGROUP TO FORM ARRAY ALWAYS PUSH WHOLE FORMGROUP NOT JUST VALUE OR CONTROLS!

answered Jun 10, 2019 at 7:10

urosbelov

3491 gold badge7 silver badges20 bronze badges

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

2 Comments

Ousama Over a year ago

It's the best answer

Hossein Ganjyar Over a year ago

I have a problem when I want to push new object! All of old objects in array converted to the last one after push!

Shoniisra · Accepted Answer · 2020-07-29 03:28:07Z

I put my code like Er Abdul Meman but I got Property push does not exist on type Error.

THIS WORKED FOR ME:

import { OnInit } from "@angular/core";
import { FormBuilder,Validators } from "@angular/forms";

export class YourClass implements OnInit {
  pitanjeForm = this.fb.group({
    articulo_alquiler: this.fb.array([]),
  });

  odgovorForm = this.fb.group({
    name: [null],
    quantity: [0, Validators.compose([Validators.required, Validators.min(0)])],
    total: 0,
  });

  constructor(private fb: FormBuilder) {}

  get articulo_alquiler() {
    return this.pitanjeForm.get("articulo_alquiler") as FormArray;
  }

  addArticulo(): void {        
    this.articulo_alquiler.push(this.odgovorForm);
    // console.log(this.articulo_alquiler);
    // console.log(this.pitanjeForm.value.articulo_alquiler);
  }
}

Er Abdul Meman · Accepted Answer · 2019-06-10 06:54:41Z

1

Replace Your code with below code

    public odgovori = this.pitanjeForm.controls['odgovori'];


 pitanjeForm = this.fb.group({
    data: ['', [Validators.required]],
    odgovori: this.fb.array([]),
    tacan: ['', [Validators.required]]
  });

  odgovorForm = this.fb.group({
    data: ['', [Validators.required]],
    color: 'danger'
  });

  addAnswer(): void {
    console.log(this.pitanjeForm.value, this.odgovorForm.value);
    this.info = this.odgovorForm.value;
    this.odgovori.push(this.info);
    console.log(this.odgovori)
  }

answered Jun 10, 2019 at 6:54

Er Abdul Meman

1731 silver badge9 bronze badges

2 Comments

urosbelov Over a year ago

this code is little messy but i tried something like that, again same errror TypeError: control.setParent is not a function

Eliseo Over a year ago

odgovori is a FormArray, so you need push a FormControl (or a FormGroup) not a value: this.odgovori.push({...this.odgovorForm}) or this.odgovori.push(new FormGroup({data:new FormGroup('',Validators.required),color:new FormControl('danger')})

elcortegano · Accepted Answer · 2020-10-04 08:41:39Z

1

try using public odgovori = this.pitanjeForm.get('odgovori') as FormArray. Then angular knows it is an array and you can push something to it.

edited Oct 4, 2020 at 8:41

elcortegano

2,70414 gold badges44 silver badges65 bronze badges

answered Oct 3, 2020 at 10:46

rob

111 bronze badge

Comments

Chukwuemeka Maduekwe · Accepted Answer · 2023-11-17 17:08:46Z

0

For Angular 8

This Worked for me

get formData() {
  return this.formData.get("names") as FormArray;
}

updateFormDataNames(newValue: any[]) {
  // Clear existing form array
  while (this.formDataNames.length !== 0) {
   this.formDataNames.removeAt(0);
  }

  // Populate the form array with new values
  newValue.forEach((item) => {
    this.nxpEntryFormEntries.push(new FormControl(item));
  });
}

Now you can easily pass a new array to updateFormDataNames(['1', '2'])

answered Nov 17, 2023 at 17:08

Chukwuemeka Maduekwe

8,7627 gold badges61 silver badges76 bronze badges

Collectives™ on Stack Overflow

Angular formarray push formgroup

5 Answers 5

2 Comments

Comments

2 Comments

Comments

For Angular 8

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

2 Comments

Comments

For Angular 8

Comments

Your Answer

Sign up or log in

Post as a guest

Related