如何以编程方式提交 Angular 反应式表单？答案

【问题标题】：How to Submit an Angular reactive form programmatically?如何以编程方式提交 Angular 反应式表单？
【发布时间】：2019-11-27 03:02:02
【问题描述】：

如何以编程方式提交响应式表单或如何检测被点击的按钮？我有 2 个按钮来提交相同的表单，对于每个按钮单击，除了提交之外，我还想采取不同的操作。

 <form (ngSubmit)="onSubmit($event)" [formGroup]="patientInfoForm">
.
.
.

            <button id="add" type="submit" >Add Patient & Continue</button>
            <button id="addngo" type="submit" >Add Patient</button>



</form>

【问题讨论】：

试试这里提到的解决方案：stackoverflow.com/questions/47408404/…
在这两个点击你想提交表单？
你为什么不使用 type="button" 和 (click)="addFunction" 和 addngoFunction？在 addFunction 和 addngoFunction 中，您可以调用 onSubmit() 并通过 this.patientInfoForm.getRawValue() 等访问表单数据...

标签： angular angular-reactive-forms

【解决方案1】：

您的组件 TS 文件中有一个方法，而不是 (ngSubmit)="onSubmit($event)"。它看起来像这样：

组件 TS 文件

addPatientAndContinue() {
    var formValue = this.patientInfoForm.value;
    // Submit the form data via a service (or HttpClient)
    // "Continue"
}

addPatient() {
    var formValue = this.patientInfoForm.value;
    // Submit the form data via a service (or HttpClient)
}

然后您将按钮的click 事件绑定到适当的方法：

<button id="add" (click)="addPatientAndContinue()">Add Patient & Continue</button>
<button id="addngo" (click)="addPatient()">Add Patient</button>

注意每个按钮上的(click) 属性。

【讨论】：

这是个好主意。我不知道为什么我没有尝试 :-) 我在想 onsubmit 事件发生了一些特别的事情。

【解决方案2】：

您可以在表单中使用 ngNoForm 来删除 ngForm 处理并添加纯 javascript 处理程序。

您可以按如下方式使用您的代码：

HTML 文件。

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

Ts 文件。

  @ViewChild('patientInfoForm') patientInfoFormElement;

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


  //Submit form programmatically
  public patientInfoFormSubmitMethod(): void {
      this.patientInfoFormElement.nativeElement.submit();
  }

【讨论】：