我需要在我的 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; }