请注意以下gif上的问题:
背后的代码:
<form [formGroup]="loginForm" (ngSubmit)="loginEmail(loginForm.value,$event)">
<div class="container">
<div class="rectangle-container">
<div class="icon-user">
<img src="assets/imgs/user-icon.png" />
</div>
<div class="email" >
<span *ngIf="!loginForm.controls.email.valid && loginForm.controls.email.value!=''">Adresse mail incorrecte</span>
<span *ngIf="loginForm.controls.email.valid && errorEmail!=''">{{errorEmail}}</span>
</div>
<span class="labelToInput">Email</span>
<ion-input [class.invalid]="!loginForm.controls.email.valid && loginForm.controls.email.dirty" formControlName="email" type="text" class="input-email"></ion-input>
<div class="divider"></div>
<div class="icon-password">
<img src="assets/imgs/password-icon.png" />
</div>
<div class="password">
<span *ngIf="!loginForm.controls.password.valid && loginForm.controls.password.value!=''">Mot de passe incorrect</span>
<span *ngIf="loginForm.controls.password.valid && errorPassword !=''">{{errorPassword}}</span>
</div>
<span class="labelToInput">Mot de passe</span>
<ion-input #passwordInput type="password" formControlName="password" [class.invalid]="!loginForm.controls.password.valid && loginForm.controls.password.dirty" class="input-password"></ion-input>
</div>
<div class="containerForgotPassword">
<button ion-button clear class="forgot-password" (click)="forgotPassword($event);">Mot de passe oblié?</button>
</div>
</div>
<div class="container">
<button ion-button [disabled]="loginForm.invalid" class="cta" type="submit">Se connecter</button>
</div>
没有css操纵输入。这似乎是离子框架中的一个错误。任何想法如何避免这个问题?