Multiple submit buttons in angular2 form

Question

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".

I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.

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

I have added code sample. But I think in this case the question is quite clear without any code examples. — Ruben Nagoga, Nov 05 '16 at 21:04
check out this answer ... http://stackoverflow.com/questions/19985344/angularjs-simple-form-submit — mike510a, Nov 05 '16 at 21:17
and this one: http://stackoverflow.com/questions/19985344/angularjs-simple-form-submit — mike510a, Nov 05 '16 at 21:21
@mike510a thank you, but I haven't found answer for my question there. I am trying to solve the problem in angular2. In angular1 I can create multiple buttons with ng-click on them and then manually call $setSubmitted in the handlers. — Ruben Nagoga, Nov 05 '16 at 21:23
Instead of plain buttons with a click, why not use submit buttons and submit listener on the form? Then you have just one listener and can work out whether to save or save and close based on which button is clicked. Most forms can be submitted without clicking the submit button. — RobG, Nov 05 '16 at 21:26
@RobG that's the idea, but I how to find out which button has been clicked? — Ruben Nagoga, Nov 05 '16 at 21:31
Yeah, not really possible with a single listener. :-( Consider a listener on each submit button so that when clicked they set the value of a hidden form control to which button was clicked. Then the submit listener can read the value of the hidden control to see whether to save or save and submit. If it has no value, then neither button was clicked and you can determine which action should be the default. You may need to reset the value of the hidden control if saving without submitting. — RobG, Nov 05 '16 at 21:48
Oh, it seems that if neither button is clicked to submit the form (e.g. focus on an input and press enter), then the form behaves as if the first button was clicked. — RobG, Nov 05 '16 at 22:02
@RobG thank you for help. Deep inside I hope there can be cleaner and easier solution for it. I found out that I can submit the form by `form.ngSubmit.emit()` so I can have simple handlers for each button. Let's see maybe someone has better idea. — Ruben Nagoga, Nov 05 '16 at 22:13

Abolfazl Roshanzamir · Answer 1 · 2022-08-14T10:31:49.257

Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :

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

Then in your typescript :

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");
  }
}

StackBlitz Here.

score 0 · Answer 2 · answered Nov 06 '16 at 18:09

You can subscribe to form changes, which I think will fire form validation.

I do something like this:

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

Then in your click handler for each button, if this.physicalForm.valid you save or save&update.

score 0 · Answer 3 · answered Jun 20 '18 at 06:53

i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'

Solution

You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.

Sample code

//here formData is my payload for the API call eg: formData.name,formData.email

<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

Multiple submit buttons in angular2 form

3 Answers3

Solution

Sample code

Linked