TypeError: Cannot read property 'controls' of undefined

Question

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

here is my .html page

<ion-header>
  <ion-navbar>
    <ion-row align-items-center>
      <!-- <ion-col col2 align-items-center>
        <ion-icon name="person" item-left></ion-icon>
      </ion-col> -->
      <ion-col col-12 align-items-center>
        <h1>Personal Details</h1>
      </ion-col>
    </ion-row>
  </ion-navbar>
</ion-header>

<ion-content padding>  
<form class="spacingafterlogo" [formGroup]="authForm" (ngSubmit)="onSubmit(authForm.value)">
  <ion-item>
    <ion-label>Full Name:</ion-label>
    <ion-input [formControl]="username"  ([ngModel])="userName" placeholder=""></ion-input>
  </ion-item>
  <!-- <ion-item>
    <ion-label>Birth Date:</ion-label>
    <ion-input  [formControl]="dob"   ([ngModel])="userDob"  placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Gender:</ion-label>
    <ion-input  [formControl]="gender"   ([ngModel])="userGender"  placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Email Id:</ion-label>
    <ion-input  [formControl]="email"  ([ngModel])="userEmail" type="email" placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Mobile:</ion-label>
    <ion-input max="10"  [formControl]="mobiile" ([ngModel])="userPhone"  type="number" placeholder="Let's get in touch"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Address:</ion-label>
    <ion-textarea  [formControl]="address"  ([ngModel])="userAddress"  placeholder="Tell us where you live"></ion-textarea>
  </ion-item>
  <ion-item>
    <ion-label>Pincode:</ion-label>
    <ion-input  [formControl]="pincode" ([ngModel])="userPincode"  type="number" placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>City:</ion-label>
    <ion-input  [formControl]="city"   ([ngModel])="userCity"  placeholder=""></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>State:</ion-label>
    <ion-input  [formControl]="state"  ([ngModel])="userState" placeholder=""></ion-input>
  </ion-item>   -->
  </form>
  <button>Edit</button> <button>Save</button> 
</ion-content>

Here is my .ts page

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)=>{      
     //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)=>{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){
      // 
    }
  }
}

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

I have 2 set of questions

1. I don't get it why I am getting that error?

2. 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).

Answer 1

The error is related to first line in your constructor

 this.username = this.authForm.controls['username'];

authForm is not initialized.

It seems you are planning to use reactive-forms (which is more elegant than template-form IMO)

Then you need to create form group and controls, as below

const authForm= new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

or using FormBuilder

See this

See this tutorial

Answer 2

your code is wrong it seams this.authform is not initialized in any where in the above code you have to initialize in the constructor like this constructor(private authform:FormBuilder) because your code this.username = this.authForm.controls['username']; controls belong to FormModule class thats why you have to intialize

every thing else right