Javascript angular 4使用登录按钮按enter键提交表单

是否可以提交带有提交按钮的表单（按enter键）

我有两个文本字段，通过点击登录按钮，我可以处理结果，但我无法通过点击回车来完成

下面是HTML代码（用完整代码更新）

这是signin.component.html

<div class="modal-content" style="padding: 10px;" id="login" *ngIf="show">
    <div class="modal-body text-left">
        <div class="login">
            <h2>Login</h2>
            <hr>
            <div class="row socialButtons">
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-facebook" (click)="signInFacebook()">
                        <i class="fa fa-facebook visible-xs"></i>
                        <span class="hidden-xs">Facebook</span>
                    </a>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-linked-in" (click)="signInLinkedin()">
                        <i class="fa fa-linkedin visible-xs"></i>
                        <span class="hidden-xs">Linkedin</span>
                    </a>
                </div>  
                <div class="col-xs-12 col-sm-12 col-md-4">
                    <a class="btn btn-lg btn-block btn-google-plus" (click)="signInGoogle()">
                        <i class="fa fa-google-plus visible-xs"></i>
                        <span class="hidden-xs">Google</span>
                    </a>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
                        <div class="form-group">
                            <label class="control-label" for="signupName">Email</label>
                            <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="signinPassword">Password</label>
                            <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
                        </div>
                    </form>
                    <div class = "error"> {{ errMsg }} </div>
                    <button class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
                    <hr>
                </div>
            </div>
            <div class="row row-sm-offset-3">
                <div class="col-xs-12 col-sm-12 col-md-6">      
                    <p class="forgotPwd">
                        Forgot password? <a href="javascript:void(0)" (click)="reset()"> Reset</a>
                    </p>
                    <p class="forgotPwd">
                        New User? <a href="javascript:void(0)" (click)="signup()"> Register now</a>
                    </p>
                </div>
            </div>          
        </div>
    </div>
</div>

<div *ngIf="showSignUp">
  <app-sign-up></app-sign-up>
</div>

<div *ngIf="showForgotPassword">
  <app-forgot-password></app-forgot-password>
</div>

试一试

登录

可以

通常，您需要将代码放入

action=”“

。但这不是旧的HTML，这是有角度的，它可以与Javascript一起工作

因此，为了做到这一点，您需要添加

novalidate

标记，并告诉表单在验证它时要做什么

您还需要声明提交输入，而不是按钮

这看起来像

<form class="loginForm" novalidate (ngSubmit)="login()" autocomplete="off">

<input type="submit" value="Login" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()"/>

---

是的，这是可能的，而且非常简单

首先，你必须更换

(button)="button()"

与

并从按钮中删除click处理程序，并将类型更改为submit

两行更改后如下所示：

<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">

以及：

---

Login您的按钮应该在表单中，但是您已经在两个输入字段中关闭了它

像这样更新代码

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
            <div class="form-group">
                <label class="control-label" for="signupName">Email</label>
                <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
            </div>
            <div class="form-group">
                <label class="control-label" for="signinPassword">Password</label>
                <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
            </div>
            <div class = "error"> {{ errMsg }} </div>
            <button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
        </form>
        <hr>
    </div>
</div>


电子邮件
密码
{{errMsg}}
登录

使用（keyup.enter）=“focusableSubmit.click（）”输入密码并调用#focusableSubmit to Button login，这将执行与按钮相同的任务，如下面的代码所示

 <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
                    <div class="form-group">
                        <label class="control-label" for="signupName">Email</label>
                        <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="signinPassword">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
                    </div>
                </form>
                <div class = "error"> {{ errMsg }} </div>
                <button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
                <hr>
            </div>
        </div>


电子邮件
密码
{{errMsg}}
登录

这是我的表单的一个捆绑版，用于发送评论。
如您所见，我阻止了textarea上的ENTER事件，这将导致在关注textarea时按ENTER键无法生成新行（但您可以使用SHIFT+ENTER）。
按enter键发送表单

<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
    <textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>


按钮类型应该是
type=“submit”
按钮类型submit不工作啊，你也缺少
（ngSubmit）=“mySubmitMethod（）”
你在开玩笑吧？这是你的更新代码：
你能发布你在阅读我的答案后尝试过的代码吗？这是我尝试过的代码，是的，这不起作用。我猜你没有尝试输入submit。让我们来看看。非常好@Rahul。我已经尝试了所有可能的方法。但只有你的方式对我有效。太棒了！非常感谢。
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
        <form class="loginForm" #loginForm="ngForm" action="" (submit)="login()" autocomplete="off" method="POST">
            <div class="form-group">
                <label class="control-label" for="signupName">Email</label>
                <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
            </div>
            <div class="form-group">
                <label class="control-label" for="signinPassword">Password</label>
                <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required>
            </div>
            <div class = "error"> {{ errMsg }} </div>
            <button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
        </form>
        <hr>
    </div>
</div>

 <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" method="POST">
                    <div class="form-group">
                        <label class="control-label" for="signupName">Email</label>
                        <input type="email" class="form-control" name="username" placeholder="Email" [(ngModel)]="username" required>
                    </div>
                    <div class="form-group">
                        <label class="control-label" for="signinPassword">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Password" [(ngModel)]="password" required (keyup.enter)="focusableSubmit.click()">
                    </div>
                </form>
                <div class = "error"> {{ errMsg }} </div>
                <button #focusableSubmit class="btn btn-lg btn-info btn-block btnlog" type="button" [disabled]="loginForm.invalid" (click)="login()">Login</button>
                <hr>
            </div>
        </div>

<form #addCommentForm="ngForm" (keydown.enter)="addComment(addCommentForm.value)">
    <textarea (keydown.enter)="$event.preventDefault()" type="text" placeholder="Leave a comment..." name="description" #description="ngModel" [(ngModel)]="comment.description"></textarea>
</form>