web-dev-qa-db-fra.com

Angular Deux boutons pour soumettre un formulaire mais avec un objectif différent

J'ai une forme réactive angular

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

J'ai deux boutons à soumettre. Je dois effectuer une opération courante lorsque les utilisateurs appuient sur le bouton, c'est-à-dire soumettre le formulaire, mais je dois également faire la différence entre les boutons, car je dois rediriger l'utilisateur vers différentes pages, en fonction du bouton enfoncé. Voici mes deux boutons:

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

Comment savoir dans l'événement OnSubmit quel bouton a été enfoncé?

angularangular-reactive-formssubmit-button
10
user1238784

J'ai trouvé une réponse. Un peu délicat: dans l'événement onSubmit, je vérifie:

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

Étant donné que l'un des boutons doit être l'élément actif du formulaire lorsque l'utilisateur clique dessus, cela fait l'affaire pour moi

3
user1238784

Vous pouvez essayer avec cette solution

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

}
6
Krishna Rathore

Essaye ça.

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

Et dans votre 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>

Et vous pouvez trouver un exemple de travail dans ce stackblitz .

Vous pouvez ajouter deux gestionnaires d'événements distincts pour les événements de clic dans les deux boutons d'envoi. Ces gestionnaires d'événements seront déclenchés avant la méthode onSubmit. Vous pouvez utiliser ces deux gestionnaires d'événements pour mettre à jour un état dans le composant afin d'identifier si l'utilisation a cliqué sur le bouton suivant ou précédent.

Et selon cet état, vous pouvez diriger l'utilisateur vers différentes pages sur la méthode onSubmit.

4
Anuradha Gunasekara

user1238784, vous ne devez pas utiliser le document directement dans Angular, utilisez plutôt ElementRef ou Renderer2. Bien que cela fonctionne, c'est contre les meilleures pratiques et cela cassera la SSR si vous décidez d'utiliser Angular Universal à un moment donné.

Manipulation directe du DOM dans Angular est grand non non, vous devez toujours manipuler le DOM en utilisant l'API fournie par le framework.

Mais vous n'avez même pas besoin de tout cela, vous pouvez passer un événement comme param comme ceci:

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

puis dans le composant, vous pouvez utiliser l'événement pour identifier le bouton qui a été cliqué

4
Nikola Rožić

Vous pouvez ajouter un événement (click)="buttonClicked='previous/next'" Aux boutons (suivant/précédent selon le cas). Ensuite, vous avez une variable membre sur votre classe buttonClicked: string Que vous lisez dans votre méthode onSubmit() et agissez comme il convient.

2
William Moore

si vous utilisez l'assistant, il est préférable de ne pas vérifier la validité à l'étape précédente! mais si vous voulez le vérifier, vous ne pouvez pas utiliser ngsubmit mais définir votre propre action:

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>

dans le composant:

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();
        }
    }
0
Fateme Fazli

J'ai résolu cela avec la solution suivante:

Ajoutez un contrôle au formulaire pour stocker la valeur dont vous avez besoin:

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

Créez une propriété pour accéder facilement au contrôle:

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

Ajoutez ensuite vos boutons d'envoi au formulaire en définissant la valeur en gérant l'événement 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>

Ensuite, vous pouvez accéder à la valeur à partir du gestionnaire onSubmit:

onSubmit(f: FormGroupDirective) {
    console.log(f.value.next);
}
0
Emilio Brandon Flanagan