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

Question

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

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

现在我喜欢做的是以某种方式在提交（事件）方法中检测哪个提交按钮已被按下。我曾希望该事件能够保存该数据，但它保存的是正在提交的表单，没有明确的方法来找到被点击的按钮。 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>

Answer 2

感谢 Günter Zöchbauer，他让我走上了正确的轨道，这是完整的解决方案

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.get('id').setValue(data.id);
        this.form.get('message').setValue(data.message);
    }

    public submit(event) {
        switch(event) {
            case 'GET' : this.getClicked(); break;
            case 'POST' : this.postClicked(); break;
            case 'PUT' : this.putClicked(); break;
            case 'DELETE' : this.deleteClicked(); break;
            default : break;
        }
    }

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

    private postClicked() {
        var data : HelloWorld = new HelloWorld();

        data.message = this.form.get('message').value;

        console.log(data);

        /* this._helloWorldClient
            .Add(data)
            .subscribe((data:HelloWorld) => this.setData(data),
                error => console.log(error),
                () => console.log('Created resource')); */
    }

    private putClicked() {

    }

    private deleteClicked() {

    }
}

和html

<section>
    <form [formGroup]="form">
        <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="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>
            </tr>
        </table>
    </form>
</section>

plunker 提取物

http://plnkr.co/edit/kx17SVfPg1DNiXIgjh66?p=preview

Answer 3

您可以通过以下方式查看点击了哪个按钮。

I removed (ngSubmit) from form tag

在.html

<form #postform="ngForm">
        <div class="row">
            <div class="col-lg-6">
                <h3 style="margin-top:24px;">My Blog</h3>
            </div>
            <div class="col-lg-6">
                <button type="submit" class="btn btn-primary pull-right"
                    style="float:right; margin-top:24px;" (click)="onSubmit(true, postform)" name="draft">Save as Draft</button>
                <button type="submit" class="btn btn-primary pull-right"
                    style="float:right; margin-top:24px;" (click)="onSubmit(false, postform)" name="publish">Publish</button>
            </div>
        </div>
<form>

在.ts

onSubmit(isDraft, postform) {
 // do whatever you want to do 
}

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

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

angular2-forms

angular