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.