Set default values to formArray in Angular 6

Question

Contact Model,

interface Contact {
  name:string;
  age:number;
}

Contact component, contacts array initialized with values ,

export class ContactComponent {

 contacts: Contact[] = [{name:'xyz', age:30}, {name:'abc', age: 25}];
 contactForm: FormGroup;

 constructor(private fb: FormBuilder) {
  this.contactForm = this.fb.group({
   contacts: this.fb.array([this.createContact()])
  });
 }

 createContact(): FormGroup {
    return this.fb.group({
       ???????? - How can initialize values here. 
    });
 }

}

Any other better way of designing it?

Guerrilla · Accepted Answer · 2021-04-25 20:56:58Z

8

You can map through the contacts and transform each element in contacts into a FormGroup and set it as a part of your contacts FormArray.

For transforming a contact into a Contact FormGroup you can simply pass the contact object as an arg to a function which will use these values and set them as the default values of the controls.

Try this:

    contacts: Contact[] = [{
      name: 'xyz',
      age: 30
    }, {
      name: 'abc',
      age: 25
    }];
    contactForm: FormGroup;
    
    constructor(private fb: FormBuilder) {}
    
    ngOnInit() {
      this.contactForm = this.fb.group({
        contacts: this.fb.array(this.contacts.map(contact => this.createContact(contact)))
      });
    
      console.log(this.contactForm.value);
    
    }
    
    createContact(contact): FormGroup {
      return this.fb.group({
        name: [contact.name],
        age: [contact.age]
      });
    }

Here's a Sample StackBlitz for your ref.

edited Apr 25, 2021 at 20:56

Guerrilla

15.1k39 gold badges127 silver badges242 bronze badges

answered Oct 12, 2018 at 20:16

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

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

Collectives™ on Stack Overflow

Set default values to formArray in Angular 6

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related