web-dev-qa-db-ja.com

Angular-プログラムでフォームを送信する

角度-プログラムでフォームを送信します。

HTMLにフォームグループがあり、コンポーネントがpostメソッドの電子メールフィールドでフォームのアクションを送信するようにします。通常の送信ボタンを使用する代わりに。

以下のtestMethodは別のボタンから呼び出されます。このメソッドでは、testFormを投稿します。アクションが必要なため、古い方法で投稿する必要があります。

これは私のHTML：

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

これはコンポーネント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
13
AngularM

NgNoFormをフォームで使用して、ngFormの処理を削除し、プレーンなJavaScriptハンドラーを追加できます。

次のようにコードを使用できます。

HTMLファイル。

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

Tsファイル。

  @ViewChild('testForm') testFormElement;

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


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

コードでngFormを取得する必要があると思います。したがって、次のようにコードを書き直してください。

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

そして、tsファイルで：

`@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

「Angular-プログラムによるフォームの送信」についてフォームがそれ自体を送信するコードは次のとおりです。わたしにはできる。お役に立てれば。

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
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()
    }
}
1
hayden