Yep, I’ve upgraded my dependencies on my package.json
to:
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "2.0.0-rc.2",
"@angular/forms": "^0.2.0",
"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",
"socket.io-client": "^1.4.8",
"zone.js": "^0.6.12"
},
and executed npm install
,
then updated the code of Angular 2 forms to the latest API:
import { Component } from '@angular/core';
import { Validators } from '@angular/common';
import { REACTIVE_FORM_DIRECTIVES, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { NavController } from 'ionic-angular';
@Component({
templateUrl: 'build/pages/account/login/login.html',
directives: [ REACTIVE_FORM_DIRECTIVES ]
})
export class LoginPage {
loginForm: FormGroup;
constructor(
private nav: NavController,
builder: FormBuilder
) {
this.loginForm = builder.group({
'username': [
'', // default value
[Validators.required, Validators.minLength(5)]
],
'password': [
'',
[Validators.required, Validators.minLength(5)]
]
});
}
submit() {
// submit this.loginForm.value
...
and the template:
<form class="list" [formGroup]="loginForm" (ngSubmit)="submit()" novalidate>
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input type="password" formControlName="password"></ion-input>
</ion-item>
<ion-buttons>
<button type="submit" block round>Sign In</button>
</ion-buttons>
</form>
Note that I prefer the model-driven forms for my apps instead the template driven.
Happy coding!