web-dev-qa-db-fra.com

Angular - Soumettre un formulaire par programme

Angular - Soumettez un formulaire par programme.

J'ai un groupe de formulaire sur le HTML et je veux que le composant soumette l'action du formulaire avec un champ email dans une méthode de publication. Au lieu d'utiliser un bouton d'envoi normal.

La méthode de test ci-dessous est appelée à partir d'un autre bouton. Dans cette méthode, je veux publier le testForm . Il doit être posté à l'ancienne comme il faut une action.

Ceci est mon HTML: 

  <form
    [formGroup]="testGroup"
    [action]='actionLink'
    method='POST'
    #testForm>
     <input name='Email' type='hidden' [value]='currentUserEmail'>
  </form>

Ceci est ma tentative de fichier Component TS: 

  @ViewChild('testForm') testFormElement;

  public currentUserEmail: string = '';
  public testGroup = this.formBuilder.group({
    Email: ''
  });


  public testMethod(): void {

      // Below: This currently doesnt seem to do anything.
      this.testFormElement.ngSubmit.emit();
  }
angularangular2-formsangular5
7
AngularM
import { Component, ViewChild } from '@angular/core';

@Component({
    template: `
        <form #testForm>
            <input name='Email' type='hidden'>
        </form>
    `
})
class MyComponent {
    @ViewChild('testForm') testFormEl;

    testMethod() {
        this.testFormEl.nativeElement.submit()
    }
}
2
hayden

Vous pouvez utiliser ngNoForm avec votre formulaire pour supprimer la gestion de ngForm et ajouter un gestionnaire javascript simple.

vous pouvez utiliser votre code comme suit:

Fichier html.

  <form ngNoForm
    [formGroup]="testGroup"
    [action]='actionLink'
    method='POST'
    #testForm>
     <input name='Email' type='hidden' [value]='currentUserEmail'>
  </form>

Fichier Ts.

  @ViewChild('testForm') testFormElement;

  public currentUserEmail: string = '';
  public testGroup = this.formBuilder.group({
    Email: ''
  });


  public testMethod(): void {
      this.testFormElement.nativeElement.submit();
  }
2
faizan baig

Concernant "Angular - Soumettre un formulaire par programme" Voici le code où un formulaire se soumet. Ça marche pour moi. J'espère que cela t'aides.

Component HTML:
    .
    .
    .  
            <form #myForm ngNoForm name="myForm" [action]="pdfServletUrl"          target="_blank" method="POST">
                 <button type="submit" [hidden]="'true'"></button>
            </form>
    .
    .
    .
    Component TypeScript:           
    .
    .
    .
    @ViewChild('myForm') myForm : ElementRef;
    .
    .
    .
    ngAfterViewInit() {
     this.myForm.nativeElement.submit();
    }
    .
    .
    .
1
user2367418