クリックする方法angular2

Question

私は角度2とイオンの問題に直面しています。私はこのコードで角度2に新しいです。クリックしてフォーム値をコントローラに送信しようとしています。私はフォーム値を送信できません。私のコードをチェックし、助け、事前

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" ng-model="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" ng-model="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" ng-model="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser(range,Name,Mobile,Key)">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

で おかげで、これは私の角度の2のコード、

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 

    constructor(public navCtrl: NavController) { 

    } 
    CreateUser(Name,Mobile,Key){ 
    alert(Name); 
    } 

} 

Answer 1

まず、角度2であなたの代わりにng-modelのディレクティブngModelを使用する必要があります。次に、Two-Way-Databindingが必要なので、 'banana-box構文' [()]にラップしてください。第3に、テンプレートで使用するすべてのモデルに対して、コンポーネントにフィールドが必要です。

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" [(ngModel)]="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" [(ngModel)]="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" [(ngModel)]="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser()">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

JS：あなたはプロパティとイベントの両方が結合する場合は、あなたのコード内で[(ngModel)]からng-modelを変更するために必要なすべての

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
    Name: string; 
    Mobile: string; 
    Key: string; 

    constructor(public navCtrl: NavController) { 

    } 

    CreateUser(){ 
     alert(this.Name); 
    } 

} 

Answer 2

まずここで更新されたコードです。

、あなたのHTMLにあなたが

<button ion-button block (click)="CreateUser(range,Name,Mobile,Key)">Login</button> 

以下のようなCreateUser機能を呼び出している。しかし

CreateUser(Name,Mobile,Key){ 
alert(Name); 
} 

の下に見られるように、コンポーネントクラスで、それは実際に3つの引数を取りますので、あなたが電話をかけることができません〜CreateUser。 理想的なコードは

<ion-grid> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Name" [(ngModel)]="Name"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Mobile" [(ngModel)]="Mobile"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col> 
       <ion-item > 
        <ion-input placeholder="Key" [(ngModel)]="Key"></ion-input> 
       </ion-item> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block (click)="CreateUser()">Login</button> 

      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col > 
       <button ion-button block>Signup</button> 

      </ion-col> 
     </ion-row> 

    </ion-grid> 

してからコンポーネントクラスの

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
    public Name:string; 
    public Mobile:string; 
    public Key:string; 

    constructor(public navCtrl: NavController) { 

    } 
    CreateUser():void{ 
     alert(this.Name+" "+this.Mobile+" "+this.Key+" user created"); 
    } 
} 

以下のようにする必要がありますしかし、あなたはngModel

import { FormsModule } from '@angular/forms';

Answer 3

を使用するようにコンポーネントに以下のインポートを追加する必要があります

あなたのコードにテンプレートフォームを使用

次いでapp.module.ts

におけるテンプレートフォームインポートFormモジュールを実装するため

はないある[（ngModel）]

<ion-grid> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Name" [(ngModel)]="user.Name"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Mobile" [(ngModel)]="user.Mobile"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col> 
        <ion-item > 
         <ion-input placeholder="Key" [(ngModel)]="user.Key"></ion-input> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col > 
        <button ion-button block (click)="CreateUser()">Login</button> 

       </ion-col> 
      </ion-row> 
      <ion-row> 
       <ion-col > 
        <button ion-button block>Signup</button> 

       </ion-col> 
      </ion-row> 

     </ion-grid> 

.TS

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

@Component({ 
    selector: 'page-form', 
    templateUrl: 'form.html' 
}) 
export class FormPage { 
user:any={}; 
    constructor(public navCtrl: NavController) { 

    } 
    CreateUser(){ 
    console.log(this.user) 
    } 

}