angular - 如何从表单外部提交响应式(Reactive)表单[点击表单外部的保存或更新按钮提交]

Question

我正在 Angular 7 中处理响应式(Reactive)表单，我需要从表单外部的按钮调用提交。

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

但我无法使用“保存”/“更新”标志提交表单。 如何将参数从表单外部的“保存”和“更新”按钮传递到我的提交函数。

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

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>