ion-input on-focus将转换属性添加到md(android)模式的input元素

时间:2018-06-09 22:06:00

标签: ionic3

请注意以下gif上的问题:

enter image description here

背后的代码:

  <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操纵输入。这似乎是离子框架中的一个错误。任何想法如何避免这个问题?

0 个答案:

没有答案