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
– Ruben Nagoga, Commented Nov 5, 2016 at 21:04
check out this answer ... stackoverflow.com/questions/19985344/… — mike510a
– mike510a, Commented Nov 5, 2016 at 21:17
@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
– Ruben Nagoga, Commented Nov 5, 2016 at 21:23

Abolfazl Roshanzamir · Accepted Answer · 2022-08-14 10:31:49Z

6

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.

edited Aug 14, 2022 at 10:31

answered Oct 10, 2019 at 10:57

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

John Baird · Accepted Answer · 2016-11-06 18:09:43Z

0

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.

answered Nov 6, 2016 at 18:09

John Baird

2,6761 gold badge17 silver badges34 bronze badges

Comments

Rameez Rami · Accepted Answer · 2018-06-20 06:53:03Z

0

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>

answered Jun 20, 2018 at 6:53

Rameez Rami

5,7682 gold badges33 silver badges39 bronze badges

Collectives™ on Stack Overflow

Multiple submit buttons in angular2 form

3 Answers 3

Comments

Comments

Solution

Sample code

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Solution

Sample code

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related