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

时间：2017-12-21 08:40:04

标签： javascript html angular forms

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

6 个答案:

答案 0 :(得分：3)

是的，你可以。

通常，您需要将代码放在[UIView transitionWithView:collectionView duration:.5 options:UIViewAnimationOptionTransitionCurlUp animations:^{ //Set Size of Cell cell.frame = CGRectMake(3, 14, 100, 100); } completion:^(BOOL finished) { }]; 中。但这不是旧的HTML，这是Angular，它适用于Javascript。

因此，为了做到这一点，您需要添加action=""标记，并在验证时告诉表单该做什么。

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

这看起来像

novalidate

答案 1 :(得分：3)

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

像这样更新您的代码

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

答案 2 :(得分：2)

使用（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 :(得分：1)

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

首先你需要替换

(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 documentation对大多数基因主题都非常有帮助，也许你应该去那里看看。

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

答案 4 :(得分：1)

这是我发送评论的表格的缩写。 如您所见，我阻止了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>

答案 5 :(得分：0)

尝试

# code in __init__.py default_app_config = 'foo.apps.MyFooConfig' # code in apps.py from django.apps import AppConfig class MyFooConfig(AppConfig): name = 'Foo' def ready(self): from chat.mqtt import client client.loop_start()

相关问题
最新问题