Ionic 2 beta 11 new Forms api problem

Ionic Framework ionic-v3
#1

Hello,
I’ve tried using new forms api which compatible with Angular 2 rc4. (refering https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub )

But, when I started app, I get an error saying:
TypeError: self.context.username is undefined

Here is login.html

   <form #registerForm="ngForm"  >
            <ion-item>
             <ion-label floating >Username</ion-label>
             <ion-input name="username" [(ngModel)]="login.username" type="text"  spellcheck="false" autocapitalize="off" required>
             </ion-input>
           </ion-item>
           <p [hidden]="username.valid || submitted == false" danger padding-left>
             Username is required
           </p>

        <ion-item>
         <ion-label floating >Password</ion-label>
         <ion-input name="password" [(ngModel)]="login.password"  type="password" required>
         </ion-input>
       </ion-item>
       <p [hidden]="password.valid || submitted == false" danger padding-left>
         Password is required
       </p>
<ion-row responsive-sm>
        <ion-col>
          <button (click)="loginCheck(registerForm)" type="submit" primary  class="button button-positive">Login</button>

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

Here is the login.ts

import {Component} from '@angular/core';
import { Validators,   Validator} from '@angular/common';
import {REACTIVE_FORM_DIRECTIVES, FormControl, FormGroup} from '@angular/forms';
import { NavController,Tabs,MenuController } from 'ionic-angular';
 import { Observable } from 'rxjs/Rx';
 

@Component({

     directives: [REACTIVE_FORM_DIRECTIVES],

    templateUrl: 'build/pages/login/login.html'
})
 
export class LoginPage {
  root:LoginPage;
  submitted = false;
  login :{username?: string , password?: string}={ };

 constructor(private navCtrl: NavController,menu:MenuController) {
}

loginCheck(registerForm: FormGroup) {
        this.submitted = true;
        if (registerForm.valid) {
           //... 
        }

      }
}

İf I use login.username.valid instead of username.valid in hidden p element, the error is not occured. It seems the name=“username” directive is not considered.

1 Like