Question

我正在使用角度7的反应式表单，我需要从表单外部的按钮调用Submit。

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

Answer 2

尝试一下：

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

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

3 个答案: