How to populate ionic form with user data

@Geelario wrote:

Good day experts. I am new to ionic and angular. Please I will need your help to solve this problem. I want to populate a form with a registered user data that is retrieved using API so that the user can edit his/her details. I am having error with my code.
userPage.ts

customerData: any; 
 createform: any;
  constructor(public modalCtrl : ModalController, private WC: WoocommerceService, private fb : FormBuilder) {

       // this retrieve user data 
    let isUserLoggedIn = localStorage.getItem('currentUserId');

    this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{

      this.customerData = data; 

    });

   }

  ngOnInit() {
    this.createform = this.fb.group({

      first_name: [''],

      last_name: [''],

      username: [''],

      email: [''],

    });

    

  }

  update(){   

     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> 

I am really having a sleepless night on this, please I need your help. Thank you.

Posts: 1

Participants: 1

Read full topic