Q: Iterate over reactive form controls Basically I want to save all reactive-form values in the session storage and on refresh I want to get the values from session storage to display in the form.
So what I am trying to do is iterate over reactive form controls, and construct an object from those values
That object can be set like this.form.patchValue(object);
I want to iterate over each single form control inside my reactive-form and create a structured object.
For Example :
profileForm = new FormGroup({
    firstName: new FormControl(''),
    phoneNo: new FormControl(''),
    selectedService : FormArray('')
    gender:new FormControl(''),
  });

In this case selectedService is derived from multiple checkboxes. Then I want to create an object like this:
Key & value
{
    firstname: "john" 
    phoneNo: "12344567"
    selectedService : {
        service1: true,
        service2: false,
        service3: true
    }
    gender : "male"
}

Here's what I tried, but I failed to create a nested object for formArray
getFormFieldsValue(formControl: any): void {
    Object.keys(formControl.controls).forEach((controlName) => {
      const control = formControl.controls[controlName];
      if (control.controls) {
        this.getFormFieldsValue(control);
      } else {
        this.createObject(controlName, control);
      }
    });
  }

  createObject(controlName: any, controlValue: any): any {
    if (controlValue.value) {
      this.objects[controlName] = controlValue.value;
    }
  }


A: Use this.profileForm.value which will give you an object:
{
    firstname: "john" 
    phoneNo: "12344567"
    selectedService : [
        true,
        false,
        true
    ]
    gender : "male"
}

You'll notice that selectedService does not contain the service names, but they are going to be in order, which should work just fine when iterating over the array.

A: If you want to store and get back the values from session storage you should use JSON.stringify(this.profofileForm.value). So you'll get an string than can be stored. Later, you can get back your object with JSON.parse.
To load the values in the form you can initalize them in the FromControl objects:
profileForm = new FormGroup({
    firstName: new FormControl('this.valFirstName'),
    phoneNo: new FormControl('this.valPhoneNo'),
    selectedService : FormArray('this.SelectedService')
    gender:new FormControl('this.gender'),
  });

Where the values valXxxxx come from the parsed json object in the session storage.
