Ionic 2 Form with ngModel

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?

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.

Oh NO, It’s not work for me,
I tried everything but still failed

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

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

I tried your way and it works fine, thank you…