【发布时间】:2019-05-26 01:06:08
【问题描述】:
离子角度 3.9.2
我有一个如下所示的登录页面,该页面在用户未登录时在启动时加载。 问题是在完成以下任一操作之前,既不能选择用户名/电子邮件,也不能选择密码字段: - 打开侧面菜单,然后将其关闭 - 导航到另一个选项卡,导航回登录 - 在很长一段时间内(最长 30 秒)频繁点击输入字段
<ion-header title="login">
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{"loginPage.title"|translate}}</ion-title>
<ion-buttons end>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<form #loginForm="ngForm" novalidate>
<ion-list no-lines>
<ion-item>
<ion-label floating color="primary">{{"loginPage.username"|translate}}</ion-label>
<ion-input [(ngModel)]="login.username" name="username" type="email" #username="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>{{"loginPage.usernameRequired"|translate}}
</p>
<ion-item>
<ion-label floating color="primary">{{"loginPage.password"|translate}}</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
{{"loginPage.passRequired"|translate}}
</p>
</ion-list>
<button ion-button (click)="onLogin(loginForm)" type="submit" block>{{ "loginPage.login" | translate }}</button>
</form>
<div></div>
<div padding>
<a class="item" href="#" (click)="onSignup()">{{ "loginPage.signup" | translate }}</a>
</div>
<div padding>
<a class="item" href="#" (click)="onForgotPassword()">{{ "loginPage.forgotPassword" | translate }}</a>
</div>
<div padding>
<a class="item" href="#" (click)="onVerify()">{{ "loginPage.verification" | translate }}</a>
</div>
</ion-content>
关于如何解决这个问题的任何线索?因为我现在正在浏览 google 和 ionic 论坛超过 1 小时,但找不到任何解决问题的方法......
编辑:
我发现了一个小技巧,可以通过从元素中删除类 input-cover 来工作。但这感觉很脏……
let elements = document.querySelectorAll('.input-cover');
for(let i in elements)
{
if(elements[i].classList)
elements[i].classList.remove('input-cover');
}
【问题讨论】:
-
出于好奇,您的 ion-input 内部是什么:#password=etc。这听起来不标准。您还可以用 v3 文档中的默认示例替换您的代码并检查输入焦点行为是否正常?
-
@SergeyRudenko 这是一个 Angular 模板引用变量。 Take a look here
-
所以是的,模板变量是已知的,但是在你的情况下为什么要分配一些东西呢?模板变量引用模板元素
-
见这里:ionicframework.com/docs/v3/developer-resources/forms 我认为您需要使用其中一种方法来实现表单,然后按照它来防止出现问题
标签: ionic-framework input ionic3