How to click in angular2

Question

I am facing problem in angular 2 and ionic , I am new to angular 2 , in this code I am trying to click and sent form value to controller , II am not able to send form value , please check my code and help , Thanks in advance

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

and this is my angular 2 code,

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

First, in Angular 2 you need to use the directive ngModel instead of ng-model . Second, you want a Two-Way-Databinding, so wrap it in 'banana-box syntax' [()] . Third, for every model you use in the template, you need a field in the component. Here is the updated code:

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

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

First of all you need to change ng-model to [(ngModel)] in your code if you want both property and event binding.

then in your HTML you are calling CreateUser function like below

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

But in component class it actually takes 3 arguments as seen below

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

so you are not able to make the call to CreateUser . The ideal code should be like below

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

and then in your component class

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");
    }
}

But you have to add the below import in your component to use ngModel

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

Answer 3

Use template form in you code

to implement template form import FormModule in app.module.ts

then insted of ng-Model use [(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)
    }

}