FormArray multiple get datain onSubmitForm ionic

Question

I have created form with formBuilder

    this.authForm = this.formBuilder.group({
      diagnostic: ['', Validators.required],
      produit:['',Validators.required],
      pieces: this.formBuilder.array([]),
      ramassage:'',
      main:''
    });
get getPiecesArray() {
    return this.authForm.get('pieces') as FormArray;
  }

  addPiece() {

    const piece = this.formBuilder.group({
      piece: [],
      prix: [],
    })

    this.getPiecesArray.push(piece);
  }

  deletePiece(i) {
    this.getPiecesArray.removeAt(i)
  }

in my html i have

<div formArrayName="pieces">
        <ion-item *ngFor="let piece of getPiecesArray.controls; let i=index" [formGroupName]="i">
            <ion-icon  item-end color="danger" name="trash"  (click)="deletePiece(i)"></ion-icon>
          <ion-item>
            <ion-input full placeholder="Piéce" formControlName="piece"></ion-input>
          </ion-item>
          <ion-item>
            <ion-input placeholder="Prix" formControlName="prix"></ion-input>
          </ion-item>
        </ion-item>
      </div>

But when i want to get from onSubmitForm()

  console.log(this.getPiecesArray().controls);
for (let control of this.getPiecesArray().controls) {
  pieces = pieces + " " + control.value;
}

I have this error Cannot invoke an expression whose type lacks a call signature. Type 'FormArray' has no compatible call signatures.

How i can get all data put in formBuilder.array

Answer 1

getPiecesArray array is a getter and not a method. So it should be called like this:

console.log(this.getPiecesArray.controls);
for (let control of this.getPiecesArray.controls) {
  pieces = pieces + " " + control.value;
}

But if you want to get the value of all the controls, you could simply do, this.authForm.value. If you just want the value of pieces, you could do this.authForm.value.pieces

Try this:

authForm: FormGroup;

constructor(
  public navCtrl: NavController,
  private formBuilder: FormBuilder
) {
  this.authForm = this.formBuilder.group({
    diagnostic: ['', Validators.required],
    produit: ['', Validators.required],
    pieces: this.formBuilder.array([]),
    ramassage: '',
    main: ''
  });
}

addPiece() {
  const piece = this.formBuilder.group({
    piece: [],
    prix: [],
  });
  this.getPiecesArray.push(piece);
  console.log('After Add: ', this.authForm.value);
}

onSubmitForm() {
  console.log(this.authForm.value);
}

deletePiece(i) {
  this.getPiecesArray.removeAt(i);
}

get getPiecesArray() {
  return ( < FormArray > this.authForm.get('pieces'));
}

And in template:

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>

  <form [formGroup]="authForm" (submit)="onSubmitForm()">
    <button type="button" (click)="addPiece()">Add Piece</button>
    <div formArrayName="pieces">
      <ion-item 
        *ngFor="let piece of getPiecesArray.controls; let i=index" 
        [formGroupName]="i">
        <ion-icon 
          item-end 
          color="danger" 
          name="trash" 
          (click)="deletePiece(i)">
        </ion-icon>
        <ion-item>
          <ion-input 
            full 
            placeholder="Piéce" 
            formControlName="piece">
          </ion-input>
        </ion-item>
        <ion-item>
          <ion-input placeholder="Prix" formControlName="prix"></ion-input>
        </ion-item>
      </ion-item>
    </div>
    <button>Submit</button>
  </form>
</ion-content>

Here's a Sample StackBlitz for your ref.