To effectively utilize data binding with Angular, it is recommended to use ngModel. Detailed information can be found in the Angular documentation.
<ion-list>
<ion-item>
<ion-label floating >Username</ion-label>
<ion-input [(ngModel)]="username" name="username" type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Password</ion-label>
<ion-input [(ngModel)]="password" name="password" type="password"></ion-input>
</ion-item>
</ion-list>
In your .ts file:
@Component({
templateUrl:"home.html"
})
export class HomePage {
private username: string;
private password: string;
constructor() {
}
}
You can refer to the username and password properties in your code to access user input values from the view. Explore more on this and related topics in forms on Angular 2 documentation.
UPDATE
Take note that for Ionic 2-beta.11, which incorporates new Angular Forms, additional checks are essential for proper functionality:
Verify the dependencies in your package.json file to ensure compatibility as shown below:
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"es6-shim": "^0.35.0",
"ionic-angular": "2.0.0-beta.11",
"ionic-native": "1.3.10",
"ionicons": "3.0.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
The angular versions should align with 2.0.0-rc.4, and importantly, include "@angular/forms": "0.2.0", among the dependencies.
In your app.ts file, import the following components:
import { disableDeprecatedForms, provideForms } from '@angular/forms';
Within the ionicBootstrap method, implement these functions to disable outdated forms and enable the new forms module:
ionicBootstrap(YourAppName,
[
disableDeprecatedForms(),
provideForms()
], {});
Import relevant form elements from @angular/forms in the designated page, ensuring other modules like @angular/core are not included.
import { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';