Password input gets resetted at each form submission

Ionic Framework ionic-v3
1

Hello.

I have a simple login form, and whenever i click the submit button (let’s assume the credentials are invalid), the password input is still filled, but right when type in the same password input it gets resetted.

Here’s a video of my problem :

Here’s my HTML code :

<form *ngIf="authType === 'login'" novalidate [formGroup]="loginForm" (ngSubmit)="authenticate(loginForm.value)">
        <ion-item style="padding-right: 16px;  margin-top: 16px;">
            <ion-label floating [class.invalid]="!loginForm.controls.loginEmail.valid && (loginForm.controls.loginEmail.dirty || loginAttempt)">
                Email
            </ion-label>
            <ion-input type="email" name="loginEmail" formControlName="loginEmail" required ngModel></ion-input>
        </ion-item>
        <ion-card color="primary" *ngIf="!loginForm.controls.loginEmail.valid && loginAttempt">
            <ion-card-content>
                L'adresse email est obligatoire.
            </ion-card-content>
        </ion-card>

        <ion-item style="padding-right: 16px;">
            <ion-label floating [class.invalid]="!loginForm.controls.loginPassword.valid && (loginForm.controls.loginPassword.dirty || loginAttempt)">
                Password
            </ion-label>
            <ion-input type="password" name="loginPassword" formControlName="loginPassword" required ngModel></ion-input>
        </ion-item>
        <ion-card color="primary" *ngIf="!loginForm.controls.loginPassword.valid && loginAttempt">
            <ion-card-content>
                Le mot de passe est obligatoire.
            </ion-card-content>
        </ion-card>

        <div padding>
            <button ion-button type="submit" block>
                <div *ngIf="busy" class="loader" style="margin-right: 10px;"></div>
                <span *ngIf="!busy">Login</span>
            </button>
        </div>
    </form>

Typescript code :

authenticate(formValues) {
        this.loginAttempt = true;
        if (this.loginForm.valid) {
            this.busy = true;
            this._authServiceProvider.login(formValues).then(function (res) {
                if (res.success) {
                    this.storage.set('token', res.token).then((function () {
                        this._toggleMenuBarProvider.setMenuBar(true);
                        this._switchPageProvider.switchPage({
                            page: PlanetsPage,
                            name: 'PlanetsPage'
                        });
                    }.bind(this)));
                } else {
                    let alert = this.alertCtrl.create({
                        title: 'Erreur',
                        subTitle: 'Les identifiants sont incorrects.',
                        buttons: ['Ok']
                    });
                    alert.present();
                    this.busy = false;
                }
            }.bind(this));
        }
    }

Thanks.

2

I can’t see your video or understand what you are asking, but replace all the direct dot-reference accesses to controls in the template with calls to get(). The way you have it now will break in production.

1 Like
3

I would like the password to stay when the form gets submitted.

You can see on the video i enter login & password and submit the form.
Then i get an invalid credentials message.
I put back the focus on the password input.
I start to type a letter and the input resets, i loose the previous password.
Hopefully it’s clearer.

Thanks for that advice!

4

Did you include how you defined your form? I didn’t see it. If the password is resetting to the initial value of loginPassword, then I think I know what is happening.

5

Oh, that must be why.

this.loginForm = formBuilder.group({
            loginEmail: ['', Validators.required],
            loginPassword: ['', Validators.required]
        });

Why does the password go back to the ‘’ value while the email does not ?

6

I bet you could get the email to reset also if you clicked in certain ways. The problem is that ngModel was designed for Angular, not Ionic. Ionic uses different change detection events. If you want to use ngModel with ion-input (and you don’t need to for this login form) then you probably need to connect the (ionChange) event of the ion-input to ChangeDetectorRef.detectChanges().

But you don’t need ngModel, since you’re already building the form. I would remove ngModel from the template and define

get email() {
   return this.loginForm.value['loginEmail'];
}

and then in your submit handler (your authenticate method) test the value of this.email. Do the same for loginPassword. That should work.

2 Likes
7

That’s good to know, however i’m not sure i understood what you mean by “test the value of this.email”.
I want the password to stay just like the email, i don’t want the email to act like the password does :smiley:

8

add this clearOnEdit=“false” to ion-input

https://github.com/ionic-team/ionic-framework/issues/14260