角度两个按钮提交表单,但目的不同

时间:2018-06-29 09:24:02

标签: angular angular-reactive-forms submit-button

我有一个角反应形式

<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事件中按下了哪个按钮?

9 个答案:

答案 0 :(得分:3)

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

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

由于当用户单击按钮时,按钮之一必须是表单上的活动元素,所以这对我来说是窍门

答案 1 :(得分:3)

您可以尝试此解决方案

  

component.html

<project>
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.abc</groupId>
    <artifactId>project</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>pom</packaging>

    <modules>
        <module>module-1</module>
        <module>module-2</module>
        <module>module-n</module>
    </modules>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.xyz<groupId>
                <artifactId>framework</artifactId>
                <version>1.1.1-SNAPSHOT</version>
            </dependency>
            <dependency>
                <groupId>com.xyz</groupId>
                <artifactId>dao</artifactId>
                <version>1.1.1-SNAPSHOT</version>
            </dependency>
        </dependencies>
    </dependencyManagement>            
</project>
  

component.ts

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

答案 2 :(得分:2)

您可以将(click)="buttonClicked='previous/next'"事件添加到按钮(适当时,下一个/上一个)。然后,您在类buttonClicked: string上有一个成员变量,您可以在onSubmit()方法中读取该成员变量并采取适当的措施。

答案 3 :(得分:0)

尝试一下。

在您的 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中找到一个有效的示例。

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

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

答案 4 :(得分:0)

如果使用向导,最好不要在上一步中检查有效性!但是,如果要检查它,则不能使用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();
        }
    }

答案 5 :(得分:0)

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

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

但是您甚至都不需要它,您可以像这样将事件作为参数传递:

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

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

答案 6 :(得分:0)

我通过以下解决方案解决了这个问题:

向表单添加控件以存储所需的值:

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

然后将您的提交按钮添加到表单,通过处理click事件来设置值:

<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);
}

答案 7 :(得分:0)

 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'); }
}

答案 8 :(得分:-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
        }
    }