CODEWITHSUNDEEP
angularformstypescriptangular-reactive-forms
urosbelov
urosbelov

Reputation: 349

Angular formarray push formgroup

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>

Upvotes: 1

Views: 22634

Answers (5)

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

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'])

Upvotes: 0

rob
rob

Reputation: 11

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

Upvotes: 1

Shoniisra
Shoniisra

Reputation: 781

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

enter image description here

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

Upvotes: 2

urosbelov
urosbelov

Reputation: 349

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!

Upvotes: 6

Er Abdul Meman
Er Abdul Meman

Reputation: 173

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

Upvotes: 1

Related Questions