Angular 两个用于提交表单但用途不同的按钮

Question

我有一个 angular 反应形式

<form [formGroup]="form" (ngSubmit)="onSubmit()">

我有两个按钮要提交。我需要在用户按下按钮时执行一个常见的操作，即提交表单，但我还需要区分按钮，因为我需要根据按下的按钮将用户重定向到不同的页面。这是我的两个按钮：

<button name="Previous" type="submit" [disabled]="form.invalid"> Previous</button>
<button name="Next" type="submit" [disabled]="form.invalid">Next</button>

我如何知道在 OnSubmit 事件中按下了哪个按钮？

Answer 1

您可以向按钮添加 (click)="buttonClicked='previous/next'" 事件（next/previous 视情况而定）。然后你在 class buttonClicked: string 上有一个成员变量，你在 onSubmit() 方法中读取它并采取适当的行动。

Answer 2

试试这个：

HTML 文件：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
<button name="Previous" type="submit" (click)="buttonClicked = 'previous'" [disabled]="form.invalid"> Previous</button>
        <button name="Next" type="submit" [disabled]="form.invalid" (click)="buttonClicked = 'next'">Next</button>

TS 文件：

buttonClicked:string;

    onSubmit() {
        if(buttonClicked == 'previous') {
             //Redirect one page
        } else {
             //Redirect another page
        }
    }

Answer 3

我找到了答案。有点棘手：在 onSubmit 事件中，我检查：

var buttonName = document.activeElement.getAttribute("Name");

由于其中一个按钮在用户单击时必须是表单上的活动元素，所以这对我来说很有效

Answer 4

试试这个。

在你的component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  form: FormGroup;
  nextClicked = false;


  constructor(private fb: FormBuilder) {
   this.form = this.fb.group({
     age: [20],
     name: ['asdas']
   });
  }

  public onSubmit(): void {
    if(this.nextClicked) {
     ////
    }else {
      ////
    }

  }

  public onNextClick(): void {
    this.nextClicked = true;
  }

  public onPreviousClick(): void {
    this.nextClicked = false;
  }
}

并且在你的component.html

<div>
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <input formControlName="age">
    <input formControlName="name">
    <button type="submit" (click)="onNextClick()">Next</button>
    <button type="submit" (click)="onPreviousClick()">Previous</button>
  </form>
</div>

您可以在此 stackblitz.

中找到一个工作示例

您可以为两个提交按钮中的点击事件添加两个单独的事件处理程序。 这些事件处理程序将在 onSubmit 方法之前触发。 您可以使用这两个事件处理程序来更新组件中的状态，以识别用户是否单击了 下一个或上一个按钮。

并且根据该状态，您可以使用 onSubmit 方法将用户定向到不同的页面。

Answer 5

如果您使用向导，最好不要在上一步中检查有效性！但是如果您想检查它，您不能使用 ngsubmit，而是定义您自己的操作：

html:

<button name="Previous" type="submit" (click)="submitForm('pre')"[disabled]="form.invalid"> Previous</button>
<button name="Next" type="submit" (click)="submitForm('next')" [disabled]="form.invalid">Next</button>

在组件中：

submitForm(type) {
        if (!this.form.valid) {
            this.checkFormValidity();
            return;
        }
    if(type === 'pre'){
      //Redirect one page

}else{
  //Redirect another page
}
}

checkFormValidity() {
        for (let item in this.form.controls) {
            this.form.controls[item].markAsTouched();
        }
    }

Answer 6

您可以尝试使用此解决方案

component.html

  <form [formGroup]="form" (ngSubmit)="onSubmit(buttonType)">
        <button type="submit" (click)="onSubmit('Next')">Next</button>
        <button type="button" (click)="onSubmit('Previous')">Previous</button>
    </form>

component.ts

onSubmit(buttonType): void {
        if(buttonType==="Next") {
            console.log(buttonType)
        }
        if(buttonType==="Previous"){
            console.log(buttonType)
        }

}

Answer 7

user1238784，你不应该在Angular中直接使用document，而是使用ElementRef或Renderer2。虽然这可行，但它违反了最佳实践，如果您决定在某个时候使用 Angular Universal，它会破坏 SSR。

在 Angular 中直接 DOM 操作很重要，不不，您应该始终使用框架提供的 API 来操作 DOM。

但你甚至不需要这些，你可以像这样将事件作为参数传递：

<form [formGroup]="form" (ngSubmit)="onSubmit($event.submitter.id)">

然后在组件中您可以使用事件来识别被单击的按钮

这是您访问用于提交表单的 input/button 的 ID 的方法

submitForm(event : MouseEvent) :void
  {
    console.log(event)
  }

Answer 8

我用以下方法解决了这个问题：

在窗体中添加一个控件来存储您需要的值：

constructor(private fb: FormBuilder) {
   this.form = this.fb.group({
     next: this.fb.control(true) // Set a default value
   });
}

创建一个属性来轻松访问控件：

get submitControl(): AbstractControl { return (this.form) ? this.form.get('next') as AbstractControl : undefined; }

然后将您的提交按钮添加到表单，通过处理点击事件设置值：

<form novalidate [formGroup]="form" #f="ngForm" (ngSubmit)="onSubmit(f)">
  <button name="Previous" type="submit" [disabled]="form.invalid" (click)="submitControl.patchValue(false)">Previous</button>
  <button name="Next" type="submit" [disabled]="form.invalid" (click)="submitControl.patchValue(true)">Next</button>
</form>

然后您可以从 onSubmit 处理程序访问该值：

onSubmit(f: FormGroupDirective) {
    console.log(f.value.next);
}

Answer 9

 HTML:
 <form [formGroup]="CreationForm" (ngSubmit)="onSubmit($event)">  
 <button type="submit" name="draft"> Save As Draft </button>   <button
 type="submit" name="save"> Save </button> </form>

Typescript:
onSubmit(event){
 if( event.submitter.name == "draft" )
 { console.log('draft'); }
 else if( event.submitter.name == "save")
 { console.log('save'); }
}

Answer 10

<button name="Previous" type="button" [disabled]="form.invalid"> Previous</button>

只需将 type="submit" 替换为 type="button" 它不会触发提交事件。 https://github.com/angular/angular.js/issues/6017

Angular 两个用于提交表单但用途不同的按钮

Angular Two buttons to submit a form but with different purpose

angular

angular-reactive-forms

submit-button