输入电子邮件地址时，离子输入会自动隐藏

时间：2018-09-10 06:56:36

标签： cordova ionic-framework hybrid

我已尝试实现该页面，该页面需要一个电子邮件地址来重置密码。但是我在离子输入中遇到了一些问题。输入电子邮件地址时，离子输入行会自动隐藏在中间

我该如何解决？我不知道问题出在哪里？用我的HTML或CSS或TS。

我的代码：

forgotpwd.html：

<ion-content class="ioncontent" no-bounce padding>
    <div>
        <div text-center fixed-content>
            <div class="login-logo-container">
                <img src="assets/imgs/login_logo.png" />
            </div>
        </div>

        <div class="div-card" fixed-content>
            <label class="labelstyle"> We just need your registered email id to send <br /> your password reset instructions </label>
            <form [formGroup]="forgotpasswordform">
                <ion-row>
                    <ion-item>
                        <ion-icon name="md-mail"></ion-icon>
                        <ion-label color="primary" floating>Email Address</ion-label>
                        <ion-input type="email" [(ngModel)]="vm.emailAddress" formControlName="emailAddress" name="emailAddress"
                                   (keyup)="moveFocus($event,password, true)"></ion-input>
                    </ion-item>
                    <div class="error-message" style="margin-left: 15px" *ngIf="forgotpasswordform.controls.emailAddress.errors && (forgotpasswordform.controls.emailAddress.dirty || forgotpasswordform.controls.emailAddress.touched)">
                        <span *ngIf="forgotpasswordform.controls.emailAddress.errors?.required">Email address is required</span>
                        <span *ngIf="forgotpasswordform.controls.emailAddress.errors?.email">Email address is invalid</span>
                    </div>
                </ion-row>
                <div class="full-width pull-right">
                    <button ion-button icon-end name="submitbutton" type="button" (click)="submitforget()" class="button" color="purple">
                        Submit
                        <ion-icon name="checkmark-circle-outline"></ion-icon>
                    </button>
                    <button ion-button icon-end name="cancelbutton" type="button" (click)="cancel()" class="button" color="purple">
                        Cancel
                        <ion-icon name="close-circle"></ion-icon>
                    </button>
                </div>
            </form>
        </div>
    </div>
</ion-content>

我的CSS：

page-forgotpassword {

    .full-width {
        width: 100%;
        float: right;
        margin-top: 8%;
    }

    .div-card {
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 5%;
        height: 80% !important;
        margin-top: -100% !important;
    }

    .ioncontent {
        background-image: url('../assets/imgs/login_background.jpg');
        // background-image: url('../assets/imgs/login_logo.png');
        background-size: cover;
        overflow: scroll !important;
    }
   .labelstyle{
       color: white;
   }

    .error-message {
        padding-top: 0px !important;
        text-align: left !important;
    }

    .item-inner, ion-item {
        border-bottom-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    ion-row {
        background-color: transparent !important;
    }

    ion-item {
        background-color: transparent !important;
    }

    ion-input {
        color: #bdcde7 !important;
    }
}


/*.email {
    border-bottom: 2px solid #00b1ff;
}

.icon-inputs {
    display: flex;
    position: absolute;
    bottom: 0;
    font-size: 18px;
    min-width: 0 !important;
    text-align: left !important;
    color: #00b1ff;
    padding-bottom: 0px;
    margin-left: -9px !important;
    zoom: 0.8;
}


.item-inner, ion-item {
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.icon-ends-fget-cancel {
    background-color: #00b1ff;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    margin-left: 88%;
    cursor: pointer;
    padding-left: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 20px;
    border-radius: 50%;
}

.icon-end-check-fgetsubmit {
    background-color: #00b1ff;
    border: none;
    color: white;
    padding-left: 17px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-right: 17px;
    vertical-align: end;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 30px;
    margin: 4px 2px;
    cursor: pointer;
    margin-left: 65%;
    border-radius: 50%;
}

.submit-button-checkmark-icon-alignment {
    vertical-align: right;
}*/

我忘记了：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import { ForgotPassword } from '../../models/forgotpassword';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthenticationService } from "../../services/authentication.service";
import { MessageService } from "../../services/message.service";
import { LoginPage } from '../login/login';

/**
 * Generated class for the ForgotpasswordPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
    selector: 'page-forgotpassword',
    templateUrl: 'forgotpassword.html',
})
export class ForgotpasswordPage {
    vm: ForgotPassword;
    emailpattern: string = "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-z]{2,3}$";
    forgotpasswordform: FormGroup;
    forgotpasswordservice: AuthenticationService;
    isPasswordReset: boolean = false;
    statusMessage: string;
    isEmailExist: boolean;
    constructor(public navCtrl: NavController, private platform: Platform, public navParams: NavParams,
        private authenticationService: AuthenticationService,
        private messageService: MessageService
    ) {
        this.vm = new ForgotPassword();
        this.isPasswordReset = false;
        this.statusMessage = '';
        platform.registerBackButtonAction(() => this.myHandlerFunction());
    }

    moveFocus(event, nextElement, isLastControl) {
        if (event.key === 'Enter') {
            if (isLastControl && isLastControl === false)
                nextElement.setFocus();
            else if (isLastControl && isLastControl === true)
                this.submitforget();
        }
    }

    myHandlerFunction() {
        this.navCtrl.push(LoginPage);
    }

    ngOnInit() {
        this.initializeValidators();
    }

    initializeValidators() {
        this.forgotpasswordform = new FormGroup({
            emailAddress: new FormControl('',
                [
                    Validators.required,
                    Validators.email
                ]),
        });
    }

    cancel() {
        this.navCtrl.push(LoginPage);
    }

    submitforget() {
        if (this.forgotpasswordform.valid) {
            this.authenticationService.forgotpassword(this.vm.emailAddress).subscribe((data) => {
                this.isPasswordReset = true;
                this.isEmailExist = data !== 'EmailNotExist';
                if (data === 'EmailNotExist') {
                    this.messageService.alert('This email address does not exist on our system please click here to register');
                } else {
                    this.navCtrl.push(LoginPage);
                    this.messageService.alert('Link to reset the password had been sent to the registered email address');
                }

            });
        } else {
            this.validateAllFormFields(this.forgotpasswordform);
        }
    }
    validateAllFormFields(formGroup: FormGroup) {
        Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            if (control instanceof FormControl) {
                control.markAsTouched({ onlySelf: true });
            } else if (control instanceof FormGroup) {
                this.validateAllFormFields(control);
            }
        });
    }

}

这是场景图片：

Hidden

它的行为方式使其自动出现和消失。

1 个答案:

答案 0 :(得分：0)

尝试使用离子本机键盘here 

import { Keyboard } from '@ionic-native/keyboard';

constructor(private keyboard: Keyboard) { }

...

this.keyboard.show();

// this.keyboard.close();
相关问题
最新问题