Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 71531

Password input gets resetted at each form submission

$
0
0

@turgodi wrote:

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.

Posts: 1

Participants: 1

Read full topic


Viewing all articles
Browse latest Browse all 71531

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>