Angular - 以编程方式提交表单

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

您可以将 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();
}