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

Question

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

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

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

此功能运行良好。

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

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

为此，我想传递一个标志“保存”或“更新”

<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

使用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>