1个表单2个提交按钮Angular 5

时间:2018-08-02 12:53:57

标签: html typescript angular5

所以我有一个表单,我需要两个提交按钮,我需要ngNativeValidate对其进行验证,如何获取在onClickResolveTramite()中提交表单的按钮的值?

它看起来很简单,但是我已经搜索了一下却一无所获,我只需要一个true或false即可知道它是否被批准。

<div class="modal-body">

  <form (ngSubmit)="onClickResolveTramite(form)"
        #form="ngForm"
        id="resolveTraimte"
        ngNativeValidate
        autocomplete="off">

    <!-- STATUS -->
    <div class="form-row">
      <div class="form-group col">
        <label for="message">
          Reason
        </label>
        <span>*</span>
        <textarea class="form-control"
                  name="message"
                  rows="4"
                  id="message"
                  [(ngModel)]="tramite.message"
                  placeholder="Reason"
                  required></textarea>
      </div>
    </div>


    <div class="form-row">
      <div class="form-group col">
        <label for="user">
          User
          <span>*</span>
        </label>
        <select class="form-control"
                name="user"
                id="user"
                [(ngModel)]="user"
                required>
          <option *ngFor="let user of tramite.users"
                  [ngValue]="user">
            {{user.nome}}
          </option>
        </select>
      </div>
    </div>

  </form>
</div>

<div class="modal-footer"
     style="border: none;">
  <button class="btn btn-light"
          (click)="onClickclose()">
    Cancel
  </button>
  <button *ngIf="tramite.needApro"
          type="submit"
          form="resolveTraimte"
          class="btn btn-danger"
          name="submitTramite"
          value="repprove"
          formaction="repprove">
    Repprove
  </button>
  <button class="btn btn-success"
          type="submit"
          name="submitTramite"
          form="resolveTraimte"
          value="approve"
          formaction="approve">
    {{ tramite.needApro ? 'Approve' : 'Complete' }}
  </button>

//  Controller

onClickResolveTramite(form: NgForm) {
    console.log(form);
  }

1 个答案:

答案 0 :(得分:1)

为每个按钮分配不同的ID。然后您可以使用获取触发触发提交的按钮的ID document.activeElement.id