Angular - 以编程方式提交表单

Posted 2023-02-18

【中文标题】Angular - 以编程方式提交表单

【英文标题】：Angular - Submit a form programmatically

【发布时间】：2018-06-13 03:43:12

【问题描述】：

。

我在 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();
  

【问题讨论】：

您能否告诉我们在控制台中看到的错误的原因是什么？当你点击和按钮时发生了什么（当你打电话给testMethod()）？谢谢

似乎 this.testFormEl.nativeElement.submit() 什么也没做。我在网络流量中看不到帖子

@MohamedAliRACHID 我已经在上面添加了我当前的尝试

@AngularM 你解决了吗？

这个solution 为我工作。

【参考方案1】：

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

constructor(formBuilder: FormBuilder) 
    

public testMethod(): void 
  this.testFormElement.nativeElement.submit();

【参考方案2】：

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

组件 HTML：

<form #myForm ngNoForm name="myForm" [action]="pdfServletUrl" target="_blank" method="POST">
  <button type="submit" [hidden]="'true'"></button>
</form>

组件 TypeScript：

@ViewChild('myForm') myForm : ElementRef;

ngAfterViewInit() 
  this.myForm.nativeElement.submit();

【参考方案3】：

我认为您应该在代码中使用 ngForm。所以，重写你的代码如下：

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

在你的 ts 文件中：

@ViewChild('testForm') testFormElement: NgForm;

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


public yourSaveMethod(): void 
  // post your model here.

【讨论】：

如果你想真正模拟提交，你还应该发出你的值this.testFormElement.ngSubmit.emit(this.testGroup.values);

【参考方案4】：

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

【讨论】：

我在我的问题中添加了上面得到的错误。您的解决方案无效

我已经尝试过这段代码，但响应一个错误，即 nativeElement 未定义。 core.js:14597 错误类型错误：无法读取未定义的属性“nativeElement”

【参考方案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