我正在创建一个概念证明,以查看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> <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中批准的方法是什么?我一直在考虑将单击事件添加到每个按钮,然后将已单击哪个按钮的组件保存在组件中的变量中,但是不确定这是否是正确的方法。
<td><button id="getButton" type="button" (click)="submit('GET')">GET</button> <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] 删除。
我来说两句