Javascript angular 4 通过使用登录按钮按 Enter 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47921070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular 4 submit form by pressing enter with login button
提问by Johny_Bravo
Is it possible to submit a form that have a submit button (by pressing enter)
是否可以提交带有提交按钮的表单（按回车键）
I have two text fields by clicking the login button I am able to process the outcome but I am unable to do it by hitting enter.
通过单击登录按钮，我有两个文本字段我可以处理结果，但我无法通过按 Enter 来完成。
Here is the HTML code(updated with full code)
这是 HTML 代码（使用完整代码更新）
this is signin.component.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>
this signin.component.ts file
这个 signin.component.ts 文件
import { Component, OnInit } from '@angular/core';
import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth/auth.service';
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
username:string;
password:string;
show = true;
showSignUp = false;
showForgotPassword = false;
errMsg = "";
constructor(
private authService: AuthService,
public activeModal: NgbActiveModal,
) { }
ngOnInit() {
this.authService.getEmitter().subscribe(res => {
if(res){
this.activeModal.dismiss('success');
}
else{
this.username = "";
this.password = "";
this.errMsg = "Invalid Username/Password";
}
})
}
signInGoogle(){
this.authService.loginWithGoogle();
}
signInFacebook(){
this.authService.loginWithFacebook();
}
signInLinkedin(){
this.authService.loginWithLinkedin();
}
logOut(){
this.authService.logOut();
}
login(){
this.authService.login(this.username,this.password);
}
reset(){
this.show = false;
this.showSignUp = false;
this.showForgotPassword = true;
}
signup(){
this.show = false;
this.showSignUp = true;
this.showForgotPassword = false;
}
}
采纳答案by Big_Data
Your button should be inside the form but you have closed it inside the two input fields.
您的按钮应该在表单内，但您已在两个输入字段内关闭它。
Update your code like this
像这样更新你的代码
<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>
回答by Rahul
Use (keyup.enter)="focusableSubmit.click()" to input Password and call #focusableSubmit to Button login, this would perform the task and same for button as shown in code below.
使用 (keyup.enter)="focusableSubmit.click()" 输入密码并调用 #focusableSubmit 到 Button 登录，这将执行任务和按钮相同，如下面的代码所示。
<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>
回答by Rahul
Yes you can.
是的你可以。
Usually, you need to put your code in action="". But this isn't old HTML, this is Angular, and it works with Javascript.
通常，您需要将代码放入action="". 但这不是旧的 HTML，这是 Angular，它适用于 Javascript。
So, in order to do that, you need to add the novalidatetag, and tell the form what to do when you validate it.
因此，为了做到这一点，您需要添加novalidate标签，并在验证表单时告诉表单该做什么。
You also need to declare a submit input instead of your button.
您还需要声明提交输入而不是按钮。
This would look like
这看起来像
<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()"/>
回答by NiklasPor
Yes it is possible and quite easy!
是的，这是可能的，而且很容易！
First you have to replace
首先你必须更换
(button)="button()"
with
和
(ngSubmit)="login()"
and remove the click handler from the button and change the type to submit.
并从按钮中删除点击处理程序并更改要提交的类型。
Both lines changed look like this:
两行都变成了这样：
<form class="loginForm" #loginForm="ngForm" action="" autocomplete="off" (ngSubmit)="login()" method="POST">
and:
和：
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button
Dont forget that this way, that button() does not get called.
不要忘记这样， button() 不会被调用。
Angular documentationis really helpful on most of the generel topics, maybe you should take a look there.
Angular 文档对大多数通用主题真的很有帮助，也许你应该看看那里。
Additionally you should consider reading up on some basic information about forms. I personally suggest: forms on MDNand buttons on MDN.
回答by Никола Каракли?
Here's a strapped version of my form for sending comments. As you see, I prevented the ENTER event on textarea and that will cause pressing ENTER while focused on textarea to not make a new line (but you can use SHIFT + ENTER). Pressing enter sends a form.
这是我用于发送评论的表格的压缩版本。如您所见，我阻止了 textarea 上的 ENTER 事件，这将导致在专注于 textarea 时按下 ENTER 不会创建新行（但您可以使用 SHIFT + 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>
回答by Curious
Give a try to
试一试
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid" (click)="login()">Login</button>
