Ionic 2 Form with ngModel

Ionic Framework ionic-v3
1

hi, I have form ionic
HTML file:

<form #form="ngForm" (ngSubmit)="editprofile()" >
      <ion-list >
        <ion-item>
          <ion-label stacked>{{'Fullname' | translate}}</ion-label>
          <ion-input type="text" value={{profile.fullname}} [(ngModel)] ="dataProfile.fullname" name = "fullname" ></ion-input>
        </ion-item>
        <ion-item>
          <ion-label stacked>{{'Email' | translate}}</ion-label>
          <ion-input type="text" value={{profile.email}}  [(ngModel)]="dataProfile.email" name = "email"></ion-input>
        </ion-item>
      </ion-list>
      <button ion-button block (click)="editprofile()">{{'Update' | translate}}</button>
</form>

TS file:

editprofile(value: any): void{
    let dataProfile ={
      fullname : this.fullname,
      email : this.email,
    }

          this.loadingprovider.showupdate(this); 
          this.profileService.upload(dataProfile)
          .subscribe(data =>{
            this.loading.dismiss();
            this.navCtrl.setRoot(ProfilePage);
          },(err)=>{
            this.loading.dismiss();
          })
}

And I have bug: ERROR TypeError: Cannot read property ā€˜fullnameā€™ of undefined
I donā€™t understand @@.
How to solve it?

2

You call the editprofile() function without any parameter, so the value will be undefined, maybe try this
(ngSubmit)="editprofile(form)", and then I would use value.fullname instead, plus a submit button is enough for you, that will call your function which is in (ngSubmit) so donā€™t create a new click event.

Btw check the Forms with Templates section.

3

Oh NO, Itā€™s not work for me,
I tried everything but still failed

4

hi @healer12

you are using ā€œletā€ keyword inside a method called editProfile(). ā€œletā€ keyword is block scoped, the scope of that variable (dataProfile) is limited to editProfile method. you couldnā€™t access dataProfile outtside of editProfile method. that is why itā€™s says it is undefined.

declare dataProfile publicly.

export class somecomponent {
     public dataProfile: any = {}
}
1 Like
5

try this

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
export class testClass {
testForm: FormGroup;
constructor(private fb: FormBuilder) {
	this.testForm = this.fb.group({
		fullname: ['', Validators.required],
		email: ['', Validators.email]
	})
}
editProfile(): void {
	this.loadingprovider.showupdate(this); 
      this.profileService.upload(this.testForm.value)
      .subscribe(data =>{
        this.loading.dismiss();
        this.navCtrl.setRoot(ProfilePage);
      },(err)=>{
        this.loading.dismiss();
      })
}

}

<form [formGroup]="testForm" (ngSubmit)="editprofile()" >
  <ion-list >
    <ion-item>
      <ion-label stacked>{{'Fullname' | translate}}</ion-label>
      <ion-input type="text"  formControlName="fullname" name = "fullname" ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>{{'Email' | translate}}</ion-label>
      <ion-input type="text" formControlName="email"name = "email"></ion-input>
    </ion-item>
  </ion-list>
  <button ion-button block (click)="editprofile()">{{'Update' | translate}}</button>
1 Like
6

I tried your way and it works fine, thank youā€¦