Как заполнить форму ioni c данными пользователя

Question

Добрый день эксперты. Я новичок в Иони c и angular. Пожалуйста, мне понадобится ваша помощь, чтобы решить эту проблему. Я хочу заполнить форму зарегистрированными пользовательскими данными, полученными с помощью API, чтобы пользователь мог редактировать свои данные. У меня ошибка с моим кодом.

userPage.ts

export class EdituserPage implements OnInit {

  user:any = {};

  createform:any;

  customerData: any;
 // account = {}


  constructor(public modalCtrl : ModalController, private WC: WoocommerceService) {

   // this retrieved user data
    let isUserLoggedIn = localStorage.getItem('currentUserId');
    this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{
      this.customerData = data;  
    })





   }

  ngOnInit() {

   //using patchValue method to populate form

     this.createform.patchValue({
      first_name: this.customerData.first_name,
      last_name: this.customerData.last_name,
      username: this.customerData.username,
      email: this.customerData.email,
    })

  }

userPage. html

<form #createform="ngForm">

            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> First name</ion-label>
              <ion-input
              name="first_name"
              ngModel
              [(ngModel)]="first_name"
              #fname="ngModel"
              required
              minlength="3"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" fname.touched && !fname.valid">
              <ion-text color="danger" >
                <p *ngIf='fname.errors.required'>First name is required</p>
                <p *ngIf='fname.errors.minlength'>First name should be minimum of 3 characters long</p>
              </ion-text>
            </div>

            <ion-item color="transparent" >
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> Last name</ion-label>
              <ion-input 
              name="last_name"
              ngModel
              [(ngModel)]="last_name"
              #lname="ngModel"
              required
              minlength="6"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" lname.touched && !lname.valid">
              <ion-text color="danger" >
                <p *ngIf='lname.errors.required'>Last name is required</p>
                <p *ngIf='lname.errors.minlength'>Last name should be minimum of 3 characters long</p>
              </ion-text>
            </div>
            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="mail" slot="start"></ion-icon> Email</ion-label>
              <ion-input 
              name="email"
              ngModel
              [(ngModel)]="email"
              #uemail="ngModel"
              required

              ></ion-input>
            </ion-item>
            <div *ngIf="uemail.touched && !uemail.valid">
              <ion-text color="danger" >
                <p *ngIf='uemail.errors.required'>Email is required</p>
                <p *ngIf='uemail.errors.pattern'>Please a provide valid email</p>
              </ion-text>
            </div>
            <ion-item color="transparent">
              <ion-label position="floating" ><ion-icon name="person" slot="start"></ion-icon> Username</ion-label>
              <ion-input 
              name="username"
              ngModel
              [(ngModel)]="username"
              #uname="ngModel"
              required
              minlength="6"

              >
            </ion-input>
            </ion-item>
            <div *ngIf=" uname.touched && !uname.valid">
              <ion-text color="danger" >
                <p *ngIf='uname.errors.required'>Username is required</p>
                <p *ngIf='uname.errors.minlength'>Username should be minimum of 6 characters long</p>
              </ion-text>
            </div>
            <ion-item  color="transparent">
              <ion-label position="floating" ><ion-icon name="call" slot="start"></ion-icon> Phone</ion-label>
              <ion-input 
              name="phone"
              ngModel
              [(ngModel)]="user.phone"
              #uphone="ngModel"
              type="number" 
              ></ion-input>
            </ion-item>
            <div *ngIf="uphone.touched && !uphone.valid">
              <ion-text color="danger" >
                <p *ngIf='uphone.errors.required'>Phone is required</p>
              </ion-text>
            </div>

            <ion-item  color="transparent">
              <ion-label position="floating" ><ion-icon name="newspaper" slot="start"></ion-icon> Address</ion-label>
              <ion-input 
              name="address"
              ngModel
              [(ngModel)]="user.billing.address_1"
              #uaddress="ngModel"    
              ></ion-input>
            </ion-item>
            <div *ngIf="uaddress.touched && !uaddress.valid">
              <ion-text color="danger" >
                <p *ngIf='uaddress.errors.required'>Address is required</p>
              </ion-text>
            </div>


              <div class="ion-padding-top">
                <ion-button expand="block"  class="ion-no-margin" color="success"   (click)="updateuser()" >
                  Update</ion-button>
              </div>
          </form> 

У меня действительно бессонная ночь, пожалуйста, мне нужна ваша помощь. Спасибо

Answer 1

Инициализируйте formControls пустым значением, затем выполните patchValues ​​

      constructor(public modalCtrl : ModalController, private WC: WoocommerceService) {
           this.initializeForm();   
       // this retrieved user data
        let isUserLoggedIn = localStorage.getItem('currentUserId');
        this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{
          this.customerData = data;
      this.createform.patchValue({
          first_name: this.customerData.first_name,
          last_name: this.customerData.last_name,
          username: this.customerData.username,
          email: this.customerData.email,
        })
        })
  })

initializeForm(){
     this.createform = this.fb.group({
      first_name: [''],
      last_name: [''],
      username: [''],
      email: [''],
    });
}

Answer 2

Перед настройкой данных с помощью patchValue вам также необходимо создать форму.

this.createform = this.fb.group({
  first_name: [''],
  last_name: [''],
  username: [''],
  email: [''],
});