angular - 检测 Angular2 RC5 响应式表单中使用了哪个提交按钮

Question

我正在创建一个概念证明，看看 angular2 是否可以在我们公司使用。到目前为止，我已经走了很远，但现在我有点卡住了。我正在使用 REST 资源并喜欢使用表单获取、发布、放置和删除。这是我目前的表格

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

提交被注册并发送回我的@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);
    }
}

现在我喜欢做的是以某种方式在 submit(event) 方法中检测哪个提交按钮已被按下。我曾希望该事件能够保存该数据，但它保存的是正在提交的表单，没有明确的方法来找到被点击的按钮。 Angular2 中批准的执行此操作的方式是什么？我一直在考虑为每个按钮添加点击事件，然后将点击按钮的组件保存在一个变量中，但不确定这是正确的方法。

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>