Best way to bind form array using patchValue in Angular 12 reactive form

Question

I am getting data in different format but after using 'split' finally I got the proper value in response. Now the console shows the response data as below:

0:{ name: 'dev', label: 'actor' },
1:{ name: 'madhu', label: 'actress' },
 ......

Now I want to patch these data in my formArray

I have created one demo for better understanding..

DEMO

tlvi38 · Accepted Answer · 2021-11-25 15:49:47Z

1

You need to push formGroup into the formArray, as below. Anytime you want to add data, you can push into the array ( you can use the extension you made to get the form control 'credentials')

 ngOnInit(): void {
    this.form = this.fb.group({
      credentials: this.fb.array(this.getData()),
    });
  }

  getData(): FormGroup[] {
    return this.data.map(d => this.fb.group({
      name: d.name,
      label: d.label,
    }))
  }

answered Nov 25, 2021 at 15:49

tlvi38

3111 silver badge8 bronze badges

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

3 Comments

Raj Over a year ago

in demo it is working but when I try to use this code in real application it shows an error: ERROR TypeError: Cannot read properties of undefined (reading 'map')

Raj Over a year ago

my bad, i get data on click event in real app not oninit!

Raj Over a year ago

Now its working fine! Many thanks!

Edward · Accepted Answer · 2021-11-25 15:48:31Z

1

use patchvalue() as defined in the documentation

// Get the data from the service or a placeholder defined here
const dataFromService: Array<{name: string; label: string}> = [
  { name: 'dev', label: 'actor' },
  { name: 'madhu', label: 'actress' }
];
// patch the form array with your data
// as long as your data conforms to the names of the FormControls in your formArray, patchValue works
form.patchValue(dataFromService);

answered Nov 25, 2021 at 15:48

Edward

1,1361 gold badge14 silver badges27 bronze badges

3 Comments

Raj Over a year ago

I tried to use your code but nothing happens! also No errors!

Raj Over a year ago

I guess its ok if I use : const dataFromService: Array<{name: string; label: string}> = this.data form.patchValue({id: this.id, reference: dataFromService })

Raj Over a year ago

I agree with you @Edward that using patchValue() would be a good practice! Please give me some idea to get rid of this issue.. if possible.

Collectives™ on Stack Overflow

Best way to bind form array using patchValue in Angular 12 reactive form

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related