Detect which submit button is used in an Angular2 RC5 Reactive Form

Question

I'm creating a prove of concept to see if angular2 can be used in our firm. I've gotten quite far sofar but now I'm a bit stuck. I'm consuming a REST resource and like to Get, Post, Put, and Delete by using a form. This is the form I currently have

<section>
    <form [formGroup]="form" (submit)="submit($event)">
        <table>
            <tr>
                <td colspan="2"><label>Id:</label></td>
                <td colspan="2"><input type="text" formControlName="id"></td>
            </tr>
            <tr>
                <td colspan="2"><label>Message:</label></td>
                <td colspan="2"><input type="text" formControlName="message" size="50"></td>
            </tr>
            <tr>
                <td><button id="getButton" type="submit">GET</button>&nbsp;<input type="text" formControlName="getId"/></td>
                <td><button id="postButton" type="submit">POST</button></td>
                <td><button id="putButton" type="submit">PUT</button></td>
                <td><button id="deleteButton" type="submit">DELETE</button></td>
            </tr>
        </table>
    </form>
</section>

The submit gets registered and sent back to my @Component

import {Component, OnInit} from "@angular/core";
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import {HelloWorld} from "../../restclient/helloworld/helloworld.model";
import {HelloWorldClient} from "../../restclient/helloworld/helloworld.client";

@Component({
    selector: "helloworld-form",
    template: require('./helloworld-form.html')
})
export class HelloWorldForm implements OnInit{
    fb: FormBuilder;
    form: FormGroup;
    getId : number;

    constructor(fb: FormBuilder, private _helloWorldClient: HelloWorldClient) {
        this.fb = fb;
        this.form = fb.group({
            "id": '',
            "message": '',
            "getId": ''
        });
    }

    ngOnInit(): void {
        this.form.controls["getId"]
            .valueChanges.subscribe(value => {
                this.getId = value;
        });
    }

    public setData(data : HelloWorld): void {
        this.form = this.fb.group({
            "id": data.id,
            "message": data.message,
            "getId": ''
        });
    }

    public getClicked() {
        this._helloWorldClient
            .GetSingle(this.getId)
            .subscribe((data:HelloWorld) => this.setData(data),
                error => console.log(error),
                () => console.log('Fetching single by id ' + this.getId + " completed"));
    }

    public submit(event) {
        event.preventDefault();
        console.log(event);
        var target = event.target || event.srcElement || event.currentTarget;
        console.log(target);
        var idAttr = target.attributes.id;
        console.log(idAttr);
        var value = idAttr.nodeValue;
        console.log(this.form);
    }
}

Now what I like to do is somehow detect in the submit(event) method which submit button has been pressed. I had hoped the event would hold that data, but instead it holds the form being submitted, with no clear way of finding the button being clicked. What is the approved way in Angular2 to do this ? I've been thinking on adding click events to each button and then saving in a variable on the component which button has been clicked, not sure that is the correct way though.

Answer 1

<td><button id="getButton" type="button" (click)="submit('GET')">GET</button>&nbsp;<input type="text" formControlName="getId"/></td>
<td><button id="postButton" type="button" (click)="submit('POST')">POST</button></td>
<td><button id="putButton" type="button" (click)="submit('PUT')">PUT</button></td>
<td><button id="deleteButton" type="button" (click)="submit('DELETE')">DELETE</button></td>