Angular2 RC5反応形式で使用される送信ボタンの検出

Question

私たちの会社でangular2を使用できるかどうかを確認するための概念を作成しています。私はかなり遠くになってしまったが、今はちょっと立ち往生している。私はRESTリソースを消費していますし、フォームを使ってGet、Post、Put、Deleteのようにしています。これは、今、私がやって好きなものを何とか提出提出（イベント）の方法で検出され、私は現在、ザ・登録し、私の@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); 
    } 
} 

に送り返されます

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

提出したフォームでありますボタンが押されました。イベントがそのデータを保持することを期待していましたが、ボタンがクリックされていることを明確に示す方法がなく、フォームが送信されていました。これを行うには、Angular2で承認された方法は何ですか？私は、各ボタンにクリックイベントを追加し、そのボタンがクリックされたコンポーネントの変数に保存することを考えていましたが、それは正しい方法ではありません。ギュンターZöchbauerへ

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

おかげで、彼はこれが

が

<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抽出HTMLでいっぱいsollution

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() { 

    } 
} 

ある右のトラックに私を置く

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