title: TypeError: Cannot read property 'controls' of undefined
body: <p>I am using Ionic 2 form controls, and just wanted to validate a form. I am getting this error "TypeError: Cannot read property 'controls' of undefined". </p>
  
  <p>here is my .html page</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-row align-items-center&gt;
        &lt;!-- &lt;ion-col col2 align-items-center&gt;
          &lt;ion-icon name="person" item-left&gt;&lt;/ion-icon&gt;
        &lt;/ion-col&gt; --&gt;
        &lt;ion-col col-12 align-items-center&gt;
          &lt;h1&gt;Personal Details&lt;/h1&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;  
  &lt;form class="spacingafterlogo" [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)"&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Full Name:&lt;/ion-label&gt;
      &lt;ion-input [formControl]="username"  ([ngModel])="userName" placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;!-- &lt;ion-item&gt;
      &lt;ion-label&gt;Birth Date:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="dob"   ([ngModel])="userDob"  placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Gender:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="gender"   ([ngModel])="userGender"  placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Email Id:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="email"  ([ngModel])="userEmail" type="email" placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Mobile:&lt;/ion-label&gt;
      &lt;ion-input max="10"  [formControl]="mobiile" ([ngModel])="userPhone"  type="number" placeholder="Let's get in touch"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Address:&lt;/ion-label&gt;
      &lt;ion-textarea  [formControl]="address"  ([ngModel])="userAddress"  placeholder="Tell us where you live"&gt;&lt;/ion-textarea&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;Pincode:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="pincode" ([ngModel])="userPincode"  type="number" placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;City:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="city"   ([ngModel])="userCity"  placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt;State:&lt;/ion-label&gt;
      &lt;ion-input  [formControl]="state"  ([ngModel])="userState" placeholder=""&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;   --&gt;
    &lt;/form&gt;
    &lt;button&gt;Edit&lt;/button&gt; &lt;button&gt;Save&lt;/button&gt; 
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Here is my .ts page </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController, NavParams } from 'ionic-angular';
  import { NativeStorage } from '@ionic-native/native-storage';
  import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';
  @Component({
    selector: 'personal-details',
    templateUrl: 'personal-details.html',
  })
  export class PersonalDetailsPage {
    authForm : FormGroup;
    username : AbstractControl;
    // phone : AbstractControl;
    // dob : AbstractControl;
    // pincode : AbstractControl;
    // address : AbstractControl;
    // state : AbstractControl;
    // city: AbstractControl;
    // gender : AbstractControl;
    userEmail : string;
    userPhone : number;
    userDob : string;
    userAddress : string;
    userPincode : number;
    userGender : string;
    userState : string;
    userCity : string;
    userImg : any;
    userName : string;
    constructor(public navCtrl: NavController, public navParams: NavParams, private nativeStorage : NativeStorage, private fb : FormBuilder) {
      this.username = this.authForm.controls['username'];
      this.nativeStorage.getItem("profileData").then((data)=&gt;{      
       //this.userName =  data.FullName;
        this.userEmail = data.EmailID;
        this.userPhone = data.Phone;
        this.userAddress = data.Address1;
        this.userPincode = data.PinCode;
        this.userGender= data.Gender;
        this.userDob =  data.Dob;
        this.userCity = data.City;
        this.userState = data.State;
        }).catch((c)=&gt;{console.log(c)})
  
  
        // this.phone = this.authForm.controls['phone'];
        // this.dob = this.authForm.controls['dob'];
        // this.pincode = this.authForm.controls['pincode'];
        // this.address = this.authForm.controls['address'];
        // this.state = this.authForm.controls['state'];
        // this.city = this.authForm.controls['city'];
        // this.gender = this.authForm.controls['gender'];
  
  
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad PersonalDetailsPage');
    }
  
    onSubmit(value: string) : void{ 
      if(this.authForm.valid){
        // 
      }
    }
  }
  </code></pre>
  
  <p>As you might have noticed, I am trying to create a profile page where the user can Edit the page on click of Edit button( I still have to write code for that). </p>
  
  <p>I have 2 set of questions</p>
  
  <ol>
  <li><p>I don't get it why I am getting that error?</p></li>
  <li><p>I am wondering if this approach is correct or not: I plan to fetch my values from localstorage and populate that into those textboxes( which will be readonly to being with) and when a user clicks Edit, I will let them edit and update the values. Save will update that into MonogDb(I am yet to write that code).</p></li>
  </ol>