angular2形式的多个提交按钮

Question

我正在构建angular2表单,我想有多个按钮来提交表单,例如"保存"和"保存并关闭".

我试图使用简单的按钮,对它们进行点击操作,但我没有发现手动将表单标记为提交给强制表单验证.

<form #ticketForm="ngForm" novalidate>
    <input type="text" id="customerName" required
        name="customerName" [(ngModel)]="ticket.customerName"
        #customerName="ngModel">

    <div class="tj-form-input-errors"
        *ngIf="customerName.errors && (customerName.dirty ||
        customerName.touched || ticketForm.submitted)">

        <small [hidden]="!customerName.errors.required">
            Customer name is required
        </small>
    </div>

    <button type="button" (click)="save(ticketForm)">Save</button>
    <button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>

Answer 1

id为每个按钮分配不同的值。然后您可以id使用 获取触发提交的按钮的document.activeElement.id。像下面这样：

在你的 HTML 中：

<form #form="ngForm" (submit)="firstSave(form,$event)">
    ...
    <div class="form-group">
        <input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
        <input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
    </div>
</form>

然后在你的打字稿中：

firstSave(form: NgForm, $event: Event) {
  var activeButton = document.activeElement.id; // document.activeElement?.id
  if (activeButton == "submit-1") {
    alert("you have clicked on submit 1");
  }
  if (activeButton == "submit-2") {
    alert("you have clicked on submit 2");
  }
}

堆栈闪电战在这里。

Answer 2

您可以订阅表单更改，我认为这将触发表单验证。

我做了这样的事情：

 this.physicalForm.valueChanges
   .map((value) => {
      return value;
   })
   .filter((value) => this.physicalForm.valid) 
   .subscribe((value) => {
      do what you need with the values here...
 });

然后在每个按钮的点击处理程序中，如果this.physicalForm.valid您保存或保存并更新。