角度4通过按下登录按钮提交表格

Question

是否可以提交具有提交按钮的表单（按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>

这个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;
  }
}

Answer 1

是的你可以。

通常，您需要将代码放在action="" 。 但这不是旧的HTML，这是Angular，它适用于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()"/>

Answer 2

您的按钮应位于表单内，但您已在两个输入字段内关闭它。

像这样更新您的代码

<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>

Answer 3

是的，这是可能的，非常简单！

首先，你必须更换

(button)="button()"

同

(ngSubmit)="login()"

并从按钮中删除单击处理程序并更改要提交的类型。

这两行都改变了如下：

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

和：

<button type="submit" class="btn btn-lg btn-info btn-block btnlog" [disabled]="loginForm.invalid">Login</button

不要忘记这样，按钮（）不会被调用。

Angular文档对大多数基因主题都很有帮助，也许你应该看看那里。

此外，您应该考虑阅读有关表单的一些基本信息。 我个人建议： MDN 上的 表单和MDN上的 按钮 。

Answer 4

使用（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>

Answer 5

这是我发送评论表格的一个短版。 如你所见，我阻止了textarea上的ENTER事件，这将导致按下ENTER同时专注于textarea而不创建一个新行（但你可以使用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>

Answer 6

尝试一下

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