webentwicklung-frage-antwort-db.com.de

Winkel - Senden Sie ein Formular programmgesteuert

Winkel - Senden Sie ein Formular programmgesteuert.

Ich habe eine Formulargruppe für den HTML-Code und möchte, dass die Komponente die Aktion des Formulars mit einem E-Mail-Feld in einer Post-Methode übergibt. Anstelle eines normalen Submit-Buttons.

TestMethod von Below wird von einer anderen Schaltfläche aufgerufen. In dieser Methode möchte ich die testForm posten. Es muss nach alter Schule geschrieben werden, da eine Aktion erforderlich ist.

Dies ist mein HTML: 

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

Dies ist der Versuch meiner Component TS-Datei: 

  @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

Sie können ngNoForm mit Ihrem Formular verwenden, um die Handhabung von ngForm zu entfernen und einfachen Javascript-Handler hinzuzufügen.

sie können Ihren Code wie folgt verwenden:

HTML-Datei.

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

Ts-Datei.

  @ViewChild('testForm') testFormElement;

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


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

Ich denke, Sie sollten ngForm in Ihren Code aufnehmen. Also schreiben Sie Ihren Code wie folgt um:

<form
[formGroup]="testGroup"
[action]='actionLink'
method='POST'
#testForm="ngForm" (ngSubmit)="testForm.form.valid ? yourSaveMethod() :showValidatinErrors()">
 <input name='Email' type='hidden' [value]='currentUserEmail'>

und in deiner ts datei:

`@ViewChild('testForm') testFormElement:ngForm;

public testMethod(): void {

  // Below: This works for me.
  this.testFormElement.ngSubmit.emit();
}
public yourSaveMethod(): void {

  // post your model here.

}
2
Mojtaba

Bezüglich "Winkel - Programmgesteuert einreichen" Hier ist der Code, an dem sich ein Formular selbst sendet. Für mich geht das. Hoffe das hilft.

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