angular - 类型错误 : Cannot read property 'controls' of undefined

Question

我正在使用 Ionic 2 表单控件，只是想验证一个表单。我收到此错误“TypeError:无法读取未定义的属性‘控件’”。

这是我的 .html 页面

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

这是我的 .ts 页面

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

您可能已经注意到，我正在尝试创建一个个人资料页面，用户可以在其中通过单击“编辑”按钮来编辑页面(我仍然需要为此编写代码)。

我有两套问题

1. 我不明白为什么会出现该错误？

2. 我想知道这种方法是否正确:我计划从 localstorage 获取我的值并将其填充到那些文本框(这将是只读的)并且当用户点击编辑时，我会让他们编辑和更新值。保存会将其更新为 MonogDb(我尚未编写该代码)。

Answer 1

错误与构造函数中的第一行有关

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

authForm 未初始化。

看来你打算使用reactive-forms(这比template-form IMO 更优雅)

然后你需要创建表单组和控件，如下所示

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

或使用FormBuilder

See this

See this tutorial