Angular 两个按钮提交表单但目的不同

Question

我有一个角反应形式

<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

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

组件.html

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

组件.ts

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

}

Answer 2

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

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

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

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

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

这是您如何访问用于提交表单的输入/按钮的 id

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

Answer 3

尝试这个。

在你的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 4

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

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

由于当用户单击按钮时，其中一个按钮必须是表单上的活动元素，因此这对我有用