TypeError：无法读取未定义的属性“控件”答案

【问题标题】：TypeError: Cannot read property 'controls' of undefinedTypeError：无法读取未定义的属性“控件”
【发布时间】：2021-04-12 15:28:56
【问题描述】：

我正在使用 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){
      // 
    }
  }
}

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

我有 2 组问题

我不明白为什么会出现该错误？
我想知道这种方法是否正确：我计划从 localstorage 中获取我的值并将其填充到那些文本框（这将是只读的），当用户单击编辑时，我会让他们编辑和更新值。保存会将其更新到 MonogDb（我还没有编写该代码）。

【问题讨论】：

标签： angular ionic2

【解决方案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

【讨论】：

【解决方案2】：

您的代码错误它接缝 this.authform 没有在上述代码的任何地方初始化你必须在构造函数中初始化像这样构造函数（私有 authform：FormBuilder）因为你的代码 this.username = this.authForm.controls['username']; 控件属于 FormModule 类，这就是你必须初始化的原因

其他的都对

【讨论】：

【解决方案3】：

<input matInput placeholder="" formControlName="email"> 
<mat-error *ngIf="myform1.controls.email.hasError('invalidEmail')">Invalid email address</mat-error>

我一直犯的错误是在 Angular 组件之间进行复制粘贴。然后表单名称不正确，因此我得到了错误。

【讨论】：