Ionic 4 FormBuilder 无法识别提交时数据库提供的自动填充数据

Question

我对 Ionic 很陌生。我有一个带有 ReactiveFormsModule 的离子形式，FormsModule init in edit-profile.page.module.ts 我正在尝试更新用户的个人资料信息，但即使字段已填充，我也无法获取数据。

编辑中-profile.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { TranslateModule } from '@ngx-translate/core';
import { EditProfilePage } from './edit-profile.page';

const routes: Routes = [
  {
    path: '',
    component: EditProfilePage
  }
];

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes)
  ],
  declarations: [EditProfilePage]
})
export class EditProfilePageModule {}

编辑配置文件-page.ts

import { Component, OnInit,ViewChild} from '@angular/core';
import { NavController, LoadingController, ToastController, ModalController } from '@ionic/angular';
import { UserService } from 'src/app/providers/user/user.service';
import { AppSettings } from 'src/app/app.settings';
import { FormBuilder, Validators,FormControl,FormGroup,ReactiveFormsModule } from '@angular/forms'

@Component({
  selector: 'app-edit-profile',
  templateUrl: './edit-profile.page.html',
  styleUrls: ['./edit-profile.page.scss'],
})]

export class EditProfilePage implements OnInit {
    SessionVars: any;
  constructor(
    public navCtrl: NavController,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    private userService: UserService,
    private modalCtrl:ModalController,
    private formBuilder:FormBuilder,
    private appSettings:AppSettings
    ) { }

 ngOnInit() {
//////////////////THIS IS WHERE I CALL THE DATA AND FILL THE FORM WITH
    this.userService.getProfile(this.UserService.uhash)
    .subscribe(res=>{
      this.user_data = res;

    });
  }

 ProfileForm = this.formBuilder.group({
      agent_name: ['',[Validators.required,Validators.minLength(2)]],
      email: ['',[Validators.required,Validators.minLength(2)]],
      phone_number: ['',[Validators.required,Validators.minLength(2)]],
      whatsapp: ['',[Validators.required,Validators.minLength(2)]],
      description: ['',[Validators.required,Validators.minLength(2)]],
      region: ['',[Validators.required,Validators.minLength(2)]],
      business_location: ['',[Validators.required,Validators.minLength(2)]]
    });

}

HTML 加载页面后，表格中会填入当前数据 (this.user_data)

  editprofile form

 <form  [formGroup]="ProfileForm" (ngSubmit)="updateProfile()" > 
        <ion-col size="12" class="ion-padding">
          <ion-list class="ion-margin-bottom">
            <ion-list-header color="light">
              <ion-label class="fw700">{{ 'app.label.userdata' | translate }}</ion-label>
            </ion-list-header>

          <ion-row> 
          <ion-col size-md="6">
            <ion-item>
              <ion-label color="dark" position="stacked">Agent, Agency, Developer Name:</ion-label>
              <ion-input type="text"  formControlName='agent_name' placeholder="Ex..: Joe Doe" value="{{this.user_data?.name}}" required></ion-input>
            </ion-item>
          </ion-col>
          <ion-col size-md="6">
            <ion-item>
              <ion-label color="dark" position="stacked">{{ 'app.label.email' | translate }}:</ion-label>
              <ion-input type="email" formControlName='email' placeholder="Ex.: joe@doe.com" value="{{this.user_data?.email}}"required></ion-input>
            </ion-item>
            </ion-col>
            <ion-col size-md="6">
            <ion-item>
              <ion-label color="dark" position="stacked">Primary Phone</ion-label>
              <ion-input type="text" formControlName="phone_number" placeholder="+233..." value=
              "{{this.user_data?.phone_number}}" required></ion-input>
            </ion-item>
            </ion-col>


            <ion-col size-md="6">
              <ion-item>
                <ion-label color="dark" position="stacked">Whatsapp</ion-label>
                <ion-input type="text" formControlName="whatsapp" placeholder="+233" value="{{this.user_data?.contact2}}"></ion-input>
              </ion-item>
              </ion-col>


              <ion-col size-md="6">
                <ion-item>
                  <ion-label color="dark" position="stacked">Location</ion-label>
                  <ion-input type="text" formControlName='business_location' placeholder="Location" value="{{this.user_data?.location}}"></ion-input>
                </ion-item>
              </ion-col>

            <ion-col size-md="12">
              <ion-item>
                <ion-label color="dark" position="stacked">Profile Description</ion-label>
                <ion-textarea type="text" formControlName='description' placeholder="Tell us about yourself or your company" value="{{this.user_data?.profile_description}}"></ion-textarea>
              </ion-item>
              </ion-col>

          </ion-row>
          </ion-list>

        </ion-col>
         </form>

[自动填写的表格][1]

页面加载后，表单会填入 this.user_data 好吧

但是在提交时我无法从 ProfileForm 获取所有值这是在编辑配置文件中。page.ts

updateProfile(){
      let agent_name  = this.ProfileForm.get('agent_name').value;
      let email  = this.ProfileForm.get('email').value;
      let phone_number  = this.ProfileForm.get('phone_number').value;
      let phone1  = this.ProfileForm.get('phone1').value;
      let phone2  = this.ProfileForm.get('phone2').value;
      let whatsapp  = this.ProfileForm.get('whatsapp').value;
      let website  = this.ProfileForm.get('website').value;
      let region  = this.ProfileForm.get('region').value;
      let business_location  = this.ProfileForm.get('business_location').value;
      let description  = this.ProfileForm.get('description').value;

       but i get no value from the form fields
        let profile_array = {
          agent_name : agent_name,      //this is empty on submit
          email : email,               //this is empty on submit
          phone_number: phone_number,  //this is empty on submit
          phone1 : phone1,            //this is empty on submit
          phone2 : phone2,            //this is empty on submit
          whatsapp :whatsapp,          //this is empty on submit
          website : website,            //this is empty on submit
          region : region,             //this is empty on submit
          business_location : business_location,      //this is empty on submit
          description : description,                //this is empty on submit};
         console.log(profile_array);
          return profile_array;
    }
        even though the form was filled with content on Load

我认为这是因为表单在字段填充值之前就已初始化。我如何让表单识别加载页面时提供的输入值？

Answer 1

要获取表单数据，您可以这样做：this.ProfileForm.value 示例：console.log(this.ProgileForm.value) Return 对象所有字段形式。

并将表单初始化放在ngOnInit()中；

ngOnInit() {
    // Init Form first step!!!
    this.ProfileForm = this.formBuilder.group({
      agent_name: ['', [Validators.required, Validators.minLength(2)]],
      email: ['', [Validators.required, Validators.minLength(2)]],
      phone_number: ['', [Validators.required, Validators.minLength(2)]],
      whatsapp: ['', [Validators.required, Validators.minLength(2)]],
      description: ['', [Validators.required, Validators.minLength(2)]],
      region: ['', [Validators.required, Validators.minLength(2)]],
      business_location: ['', [Validators.required, Validators.minLength(2)]]
    });

    //////////////////THIS IS WHERE I CALL THE DATA AND FILL THE FORM WITH
    this.userService.getProfile(this.UserService.uhash)
      .subscribe(res => {
        this.user_data = res;
        // Use PatchValue() set value form
        this.ProfileForm.patchValue({
          agent_name: res.agent_name,
          email: res.email,
          ...
        });
      });
  }

Ionic 4 FormBuilder 无法识别提交时数据库提供的自动填充数据

Ionic 4 FormBuilder not recognising auto-filled data supplied from database onsubmit

angular

ionic-framework

ionic4

ionic5