Load data in formGroup with FormArray Angular

Question

I have a dynamic form with FromGroup and FormArray.. The dynamic form works well, I can add new elements etc.... On the other hand I have problems to load an object list by default in my form. For example if I have a list with two objects, I would like to have two forms with the data of its two objects... I have an example on stackblitz here : https://stackblitz.com/edit/angular-4crhvw

PS: in my example stakblitz I made the example to display an element but I want to display all elements

See as attachments what I would like to post

Rashmi Kumari Rashmi Kumari · Accepted Answer · 2018-08-05T09:50:45

You are getting 1 element because you are adding only 1 element to formArray here

 this.initFormArray(this.listAddres[0]);

you need to create an array form your array this array

  listAddres: Adresse[] = [ 
      {label:'labs1', rue :'2', nomRue:'allerte'}, 
      {label:'Olabel', rue :'3', nomRue:'allerte'}
  ];

Modified your code Check below link https://angular-h2v8hx.stackblitz.io

Here is code snipped

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormArray, ValidatorFn, ValidationErrors, FormBuilder } from '@angular/forms';
import { Adresse } from './adresse';
import { addresseValidator } from '../valid-address.directive';

@Component({
  selector: 'app-adresse',
  templateUrl: './adresse.component.html',
  styleUrls: ['./adresse.component.css']
})
export class AdresseComponent implements OnInit {
  addressForm: FormGroup;
  label: FormControl;
  rue: FormControl;
  nomRue: FormControl;
  list: Adresse[] = [];
  adresse: Adresse = new Adresse();
  fa: FormArray;

  listAddres: Adresse[] = [
    { label: 'labs1', rue: '2', nomRue: 'allerte' },
    { label: 'Olabel', rue: '3', nomRue: 'allerte' }
  ];
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.addressForm = new FormGroup({
      adresses: this.formBuilder.array([])
    });
    this.initFormArray(this.listAddres);
  }
  createForms(adresse): FormGroup {
    let formGroup: FormGroup = new FormGroup(
      {
        label: new FormControl(adresse.label),
        rue: new FormControl(adresse.rue),
        nomRue: new FormControl(adresse.nomRue)
      },
      {
        validators: addresseValidator
      }
    );
    return formGroup;
  }

  initFormArray(adresse: Adresse[]) {
    const formArray = this.addressForm.get('adresses') as FormArray;
    adresse.map(item => {
      formArray.push(this.createForms(item));
    });
    this.addressForm.setControl('adresses', formArray);
  }

  get adresses() {
    return this.addressForm.get('adresses') as FormArray;
  }

  add() {
    this.adresses.push(this.createForms(this.adresse));
  }

  finish() {
    this.list = this.addressForm.value
    console.log(this.list);
  }
}

Load data in formGroup with FormArray Angular

1 Answers