检测Angular2 RC5反应形式中使用了哪个提交按钮

肯尼

我正在创建一个概念证明,以查看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中批准的方法是什么?我一直在考虑将单击事件添加到每个按钮,然后将已单击哪个按钮的组件保存在组件中的变量中,但是不确定这是否是正确的方法。

贡特·佐赫鲍尔(GünterZöchbauer)
<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

形式在angular2

来自分类Dev

如何使用Angular2中的Date对象检测更改?

来自分类Dev

使用共享服务更改angular2中的检测

来自分类Dev

Angular2使用值对等或引用对等来检测更改?

来自分类Dev

angular2 rc5中的默认请求选项

来自分类Dev

Angular2 RC5提前编译器无法生成工厂.js文件吗?

来自分类Dev

Angular2 RC5模块之间的共享组件

来自分类Dev

Angular2 rc5:没有Http的提供程序

来自分类Dev

Angular2 RC5 ExceptionHandler中的更改?

来自分类Dev

如何在Angular 2 RC5中使用HashLocationStrategy进行引导

来自分类Dev

ngrx / effects switchMap不再在Angular2 RC5中工作

来自分类Dev

在Angular 2(RC5)中使用多个自定义模块

来自分类Dev

Angular2 RC5 WebPack ngRx热模块更换

来自分类Dev

Angular2 RC5:我应该在NgModule中放置接口吗?

来自分类Dev

如何在Angular2 rc5中导入茉莉花测试功能

来自分类Dev

Angular2 RC5跨模块提供程序/扫描

来自分类Dev

Angular2 RC5强制将组件导入移动到NgModule声明-为什么?

来自分类Dev

Angular2中的路由器导航和查询参数[RC5]

来自分类Dev

Angular2(RC5)中的应用范围变量

来自分类Dev

Angular2 RC5路由器找不到模块(延迟加载)

来自分类Dev

带有ng-bootstrap 404错误的Angular2 RC5入门

来自分类Dev

嵌套Angular2 RC5路由多个文件

来自分类Dev

在Angular2 rc5中具有ng2-bootstrap模态的怪癖

来自分类Dev

如何在angular2 RC5中获取路线参数

来自分类Dev

为什么Angular2不自动检测组件定义中使用的指令和提供程序?

来自分类Dev

Angular2 Rc4到Rc5迁移:Traceur问题

来自分类Dev

Angular2使用值对等或引用对等来检测更改?

来自分类Dev

primeng angular2 rc5无法加载模块

来自分类Dev

Angular2 检测 OnChange

Related 相关文章

热门标签

归档