I need to convert one of the form arrray in my formGroup

Question

This is my ngOnInit

 ngOnInit() {
      this.formGroup = this._formBuilder.group({
        
        basic: this._formBuilder.array([this.basicGroup()]),
        experience: this._formBuilder.array([this.experienceGroup()]),
        education: this._formBuilder.array([this.educationGroup()]),
        skills: this._formBuilder.array([this.skillsGroup()]),
        contact: this._formBuilder.array([this.contactGroup()]),
        summary: this._formBuilder.array([this.summaryGroup()]),

      });

then I pass values of form group to params and print it on console.

In my console after form submission am getting the form values like this.

{
basic:[{...}]
experience:[{...}]
education:[{...}]
skills:[{...}]
contact:[{...}]
summury:[{...}]
}

I need to extract the values in basic array and the values in form group should be look like this when I console value of params

{
profile_name: value
country_id: value
and all other fields in basic
experience:[{...}]
education:[{...}]
skills:[{...}]
contact:[{...}]
summury:[{...}]
}

my basic form array looks like this

 basicGroup(): FormGroup{
      return this._formBuilder.group({
        profile_name: ['', [Validators.required]],
        country_id: ['', [Validators.required]],
        address: ['', [Validators.required]],
        years_of_experience: ['', [Validators.required]],
        cell_phone: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
        main_phone: ['', [Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
      })
    }

How can I solve this?

Answer 1

You can directly add formControls for each individual items of basicGroup instead of adding basicGroup as formArray. For example:

this.formGroup = this._formBuilder.group({
        
    profile_name: ['', [Validators.required]],
    country_id: ['', [Validators.required]],
    address: ['', [Validators.required]],
    years_of_experience: ['', [Validators.required]],
    cell_phone: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
    main_phone: ['', [Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
    experience: this._formBuilder.array([this.experienceGroup()]),
    education: this._formBuilder.array([this.educationGroup()]),
    skills: this._formBuilder.array([this.skillsGroup()]),
    contact: this._formBuilder.array([this.contactGroup()]),
    summary: this._formBuilder.array([this.summaryGroup()]),

  });

else

Try basicGroup as a child formGroup.

basicGroup: this._formBuilder.group({
        profile_name: ['', [Validators.required]],
        country_id: ['', [Validators.required]],
        address: ['', [Validators.required]],
        years_of_experience: ['', [Validators.required]],
        cell_phone: ['', [Validators.required, Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]],
        main_phone: ['', [Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")]]
    })

And before posting this to backend pass it though a mapper function like this:

mapper(){
   let formattedOutput = {...this.formGroup.value};
   delete formattedOutput.basicGroup;
   formattedOutput = {
      ...formattedOutput, 
      ...this.formGroup.get('basicGroup').value
   }
   return formattedOutput;
}