Angular 2フォーム入力をtypscriptコンポーネントに渡すにはどうすればいいですか？

Question

私はアンギュラ2に慣れています。フォーム入力値をtsコンポーネントに渡してJSON文字列としてSpringコントローラに送信する方法を探しています。私が作成した基本フォームは次のとおりです。

人.component.html

<div class="panel-body"> 
    <div class="row"> 
    <div class="col-sm-1"><label class="control-label" for="Name">Full Name: 
    </label></div> 
    <div class="col-sm-3"> 
    <input type="text" class="form-control2" placeholder="Full Name" 
    [(ngModel)]="user.name"></div></div> 
    <br> 
    <div class="row"> 
    <div class="col-sm-1"><label class="control-label" for="Email">Email:</label></div> 
     <div class="col-sm-3"> 
      <input type="text" class="form-control2" [(ngModel)]="user.email"> 
     </div> 
    </div> 
    <br> 
    <div class="col-sm-9">    
       <button class="btn1" (click)="savePage()"><b>Save</b></button> 
      <button class="btn1" (click)="resetPage()"><b>Cancel</b></button> 
       </div> </div> 

person.ts

export class Person { 
    constructor(
     public name: string, 
     public email: string, 
      ) { } 
} 

さらに行う必要がありますか？

Answer 1

あなたは既にそれを通過しています！ [(ngModel)]="user.name" - これはいわゆる双方向バインディングです。 あなたのタイスクリプトファイルでは、オブジェクトuserに入力値が入力されています サービスの種類が必要です。つまり、コンポーネントのプロバイダに指定する必要があるサービスはuser.service.tsです。

//コンポーネント

@Component({ 
    [...] 
    providers: [UserService] 
}) 


export class SomeComponent { 

    user: User = new User(); 

    public SomeComponent(private _userService: UserService) {} 

    public addUser(): void { 
    this._userService.addUser(this.user).subscribe(res => { 
     console.log(res); //whatever 
    }); 
    } 
} 

//サービス

public addUser(user: User) { 
    return this.http.post(this.host + this.apiPrefix + '/users/', JSON.stringify(user), 
     {headers: <your headers>}) 
    .map((res: any) => { 
     return res; 
    }); 
    } 

Answer 2

あなたはこの

export class Person { 
    name: string; 
    email: string; 
} 

よう[(ngModel)]あなたPerson.ts外観を使用している場合は、person.component.ts

で、それをインポートします

import { Person } from 'person.ts'; 

とあなたのクラスの内部PersonComponent宣言user:Person; そして今[(ngModel)]はあなたのためのデータをマップしますconstructor

にこのようなthis.user = new Person();を呼び出します。あなたがのようなものを行うことができ活字体で

Answer 3

：あなたのケースでは

export class Person { 
    name: string; 
    email: string; 
} 

const email = 'some mail'; 
const name = 'some name'; 
const person: Person = { name: name , email:email } 

それは次のようになります。

const person: Person = {name: user.name, email: user.email} 

またはあなただけのようにする必要があり最終的にはちょうど

const person: Person = user; 

確かに、プロパティが一致します。あなたが持っている場合は は、例えば、このようなMethodeのは：

someMethod(user); <--- this will work;