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

Вы можете попробовать это решение

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 2

user1238784, вы не должны использовать документ напрямую в Angular, вместо этого используйте ElementRef или Renderer2. Хотя это работает, это противоречит передовым методам и нарушит SSR, если вы решите использовать Angular Universal в какой-то момент.

Прямые манипуляции с DOM в Angular велики нет, нет, вы всегда должны манипулировать DOM с помощью API, предоставляемого фреймворком.

Но вам даже ничего этого не нужно, вы можете передать событие как параметр:

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

и затем в компоненте вы можете использовать событие, чтобы идентифицировать кнопку, на которую нажали

Answer 3

если вы используете мастер, лучше не проверять действительность на предыдущем шаге! Но если вы хотите проверить его, вы не можете использовать 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 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

Я нашел ответ. Немного сложно: В событии onSubmit я проверяю:

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

Поскольку одна из кнопок должна быть активным элементом в форме, когда пользователь щелкает по ней, для меня это помогает

Answer 6

попробуйте это:

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 7

Вы можете добавить событие (click)="buttonClicked='previous/next'" к кнопкам (следующее / предыдущее в зависимости от ситуации). Затем у вас есть переменная-член в вашем классе buttonClicked: string, которую вы прочитали в своем методе onSubmit(), и действуйте соответствующим образом.