Angular – 以编程方式提交表单

发布时间：2020-12-17 07:11:23 所属栏目：安全来源：网络整理

导读：Angular – 以编程方式提交表单. 我在HTML上有一个表单组,我希望组件使用post方法中的电子邮件字段提交表单的操作.而不是使用正常的提交按钮. 下面的testMethod从另一个按钮调用.在这个方法中,我想发布testForm.它必须以旧学校的方式发布,因为它需要一个动作

Angular – 以编程方式提交表单.

我在HTML上有一个表单组,我希望组件使用post方法中的电子邮件字段提交表单的操作.而不是使用正常的提交按钮.

下面的testMethod从另一个按钮调用.在这个方法中,我想发布testForm.它必须以旧学校的方式发布,因为它需要一个动作.

这是我的HTML：

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

这是我的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();
  }

解决方法

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!