Angular2 / Nativescript:在软键盘上按下返回键时提交表单

时间:2017-04-04 07:27:34

标签: angular nativescript angular2-nativescript

我有一个Angular2 / Nativescript登录组件,其中包含用户名和密码TextFields ...当正在编辑密码textField时,我将returnKeyType设置为“done”并期望在按下Done时调用login()函数软键盘。在按下完成的那一刻,键盘被解除但登录功能没有被调用,因此在键盘被解除后,我仍然需要点击登录按钮才能提交表单。在Nativescript中的特定TextField上按下返回键时,有没有办法提交表单?如果是这样我该如何实施呢?我尝试了returnPress事件,但没有任何反应......

我的代码:

<ActionBar title="Login"></ActionBar>
<StackLayout class="page">
    <GridLayout columns="*, auto" rows="auto">
        <ActivityIndicator class="m-l-10 m-t-10 activity-indicator" [busy]="busy" [visibility]="busy ? 'visible' : 'collapse'" horizontalAlignment="left"></ActivityIndicator>
        <Button row="0" col="1" id="setIPBtn" class=" m-t-20 pull-right font-awesome" text="&#xf0ad; Settings" (tap)="setIP()"></Button>
    </GridLayout>

    <Label class="m-x-auto m-t-20 title h1 text-primary p-x-10" text="Log In" backgroundColor="blue"></Label>
    <StackLayout class="form">
        <StackLayout class="input-field">
            <Label class="body label text-left" text="Enter Username"></Label>
            <TextField class="input input-border" hint="Username" [(ngModel)]="username" autocorrect="false" autocapitalizationType="none" returnKeyType="next"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <Label class="body label text-left" text="Enter Username"></Label>
            <TextField class="input input-border" secure="true" hint="Password" [(ngModel)]="password" autocorrect="false" autocapitalizationType="none" returnKeyType="done" returnPress="login()"></TextField>            
        </StackLayout>
        <Button class="btn btn-submit font-awesome bg-primary" [text]="isLoggingIn ? 'Logging in...' : '&#xf090; Login'" (tap)="login()" [isEnabled]="username !== '' && username !== null && password !== '' && password !== null && !isLoggingIn"></Button>
    </StackLayout>      



</StackLayout>

1 个答案:

答案 0 :(得分:4)

试试这个:

(returnPress)="login()"