Question

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

Answer 1

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

Answer 2

您可以在表单中使用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();
  }

Answer 3

关于“角度-以编程方式提交表单” 这是表单提交自身的代码。这个对我有用。希望这会有所帮助。

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();
    }
    .
    .
    .

Answer 4

我认为您应该在代码中使用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.

}

Answer 5

我在github上找到了很好的解决方案

它将设置为true

现在的退出方法是：

HTML：

 <form [formGroup]="form" #myForm="ngForm" novalidate class="create-form">

ts：

@ViewChild('myForm') ngForm: NgForm;

...
public onSubmit() {
 this.ngForm.onSubmit(undefined); // it will setup submitted as true

Angular - 以编程方式提交表单

5 个答案: