我需要在formGroup

问题描述

这是我的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()]),});

然后将表单组的值传递给params并将其打印在控制台上。

提交表单后，在我的控制台中正在获取这样的表单值。

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

我需要提取基本数组中的值，并且在控制台参数值时，表单组中的值应如下所示

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

我的基本表单数组看起来像这样

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

我该如何解决？

解决方法

您可以直接为formControls的每个项目添加basicGroup，而不必将basicGroup添加为formArray。例如：

this.formGroup = this._formBuilder.group({
        
    profile_name: ['',[Validators.required]],country_id: ['',address: ['',years_of_experience: ['',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()]),});

其他

尝试将basicGroup用作子formGroup。

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

在将其发布到后端之前，请通过如下所示的映射器函数将其传递：

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