How to patch value in angular with dynamic fields?

Question

I have an object of values in angular and I want to add that object to my formGroup. But somehow I am unable to do that. Please check my code and let me know where I am wrong.

 ngOnInit() {
    this.socialMediaForm = this.fb.group({
      //---------------------//
      //   Add values here  //
      //-------------------//
      socialAccounts: this.fb.array([]),
    });

    const userInfo = JSON.parse(localStorage.getItem('user_info'));

    for (const [key, value] of Object.entries(userInfo)) {
      this.socialMediaForm.patchValue({ [key]: value });
    }
  }

Any solution appreciated!

Eliseo · Accepted Answer · 2021-07-05 06:41:18Z

3

you need add the FormControls to your form. For this, you need use the method addControl

for (const [key, value] of Object.entries(userInfo)) {
    const control=this.socialMediaForm.get(key)
    if (!control) //if not has a control called "key"
        this.socialMediaForm.addControl(key,new FormControl(value))
    else
        control.setValue(value);
}

If you're sure that has no control you can simply

for (const [key, value] of Object.entries(userInfo)) {
    this.socialMediaForm.addControl(key,new FormControl(value))
}

answered Jul 5, 2021 at 6:41

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Comments

Zohaib Ahmed · Accepted Answer · 2021-07-05 05:46:48Z

0

If you want to add values from an object to a form then you need to create another nested FormGroup variable inside your main FormGroup.

 ngOnInit() {
    this.socialMediaForm = this.fb.group({
      userInfo : this.fb.group({}),
      socialAccounts: this.fb.array([]),
    });

    const userInfoFromStorage = JSON.parse(localStorage.getItem('user_info'));

    this.socialMediaForm.patchValue({userInfo:userInfoFromStorage});

  }

answered Jul 5, 2021 at 5:46

Zohaib Ahmed

2112 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to patch value in angular with dynamic fields?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related