如何从表单外部提交反应式表单[提交点击表单外的保存或更新按钮]

Question

我正在 angular 7 中处理反应式表单，我需要从表单外的按钮调用提交。

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit()" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit()" >
</form>

这个函数运行良好。

现在，我需要通过多个按钮提交表单，即

如果用户点击保存按钮，应该提交表单并保存
如果用户单击“更新”按钮，应提交并更新表单

为此，我想从

传递一个标志'Save'或'Update'

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit('Save')" />

<input type="button" form="ngForm"  class='Button' value="Update" (click)="detailForm.ngSubmit.emit('Update')" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit(flag)" >
    </form>

但是我无法提交带有 'Save' / 'Update' 标志的表单。 如何将表单外的“保存”和“更新”按钮的参数传递到我的提交函数。

任何富有成效的建议将不胜感激。

Answer 1

试试这个：

HTML:

<button (click)="onSubmit(detailForm.value,'save')">Submit</button>
<button (click)="onSubmit(detailForm.value,'update')">Update</button>

TS:

onSubmit(formValue:any, type:string) {
 /// your code
}

Answer 2

请使用 type="submit" 而不是 type="button"，或者如果您想在表单外使用。

<input type="submit" form="ngForm" (click)="onSubmit(gDetailForm.value, 'save')"/>
<input type="submit" form="ngForm" (click)="onSubmit(gDetailForm.value, 'update')"/>
<form id="myForm" [formGroup]="gDetailForm">
    <input type="text" name="name"/>
</form>

Answer 3

试试这个，它对我有用：

在HTML中：

<input type="button" form="ngForm"  class='Button' value="Save" (click)="detailForm.ngSubmit.emit('Save')" />

<input type="button" form="ngForm"  class='Button' value="Update" (click)="detailForm.ngSubmit.emit('Update')" />

<form [formGroup]="gDetailForm" (ngSubmit)="onSubmit($event, detailForm)" id="ngForm" #detailForm="ngForm">
</form>

在component.ts中：

onSubmit(isPublished: string, formId: any) {
 console.log(isPublished); //Save or Update
  if (this.gDetailForm.valid) {
   // enter code here
  }
}

Working Demo

如何从表单外部提交反应式表单[提交点击表单外的保存或更新按钮]

How to submit reactive form from outside the form [submitting on click save or update buttons outside the form]

angular

angular-reactive-forms