web-dev-qa-db-ja.com

angular 4ログインボタンでEnterキーを押してフォームを送信する

送信ボタンのあるフォームを送信できますか（Enterキーを押します）

ログインボタンをクリックして2つのテキストフィールドを作成しましたが、結果を処理することはできますが、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;
  }
}
javascripthtmlangularforms
4
Johny_Bravo

ボタンはフォーム内にあるはずですが、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>
4
Big_Data

（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>
3
Rahul

はい、できます。

通常、コードは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()"/>
3
user4676340

はい、それは可能で非常に簡単です！

最初に交換する必要があります

(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

この方法を忘れないでください、そのbutton（）は呼び出されません

Angular documentation は、ほとんどの一般的なトピックで本当に役立ちます。

さらに、フォームに関するいくつかの基本情報を読むことを検討する必要があります。私は個人的に提案します： MDNのフォーム および MDNのボタン 。

2
Niklas

これは、コメントを送信するための私のフォームのストラップバージョンです。ご覧のとおり、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>
1
Никола Караклић

してみてください

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

0
Curious