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

您可能已经注意到，我正在尝试创建一个配置文件页面，用户可以单击“编辑”按钮编辑页面（我仍然需要为此编写代码）。

我有两组问题

我不明白为什么我会收到这个错误？
我想知道这种方法是否正确：我计划从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

Answer 2

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

其他所有事情都正确

Answer 3

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

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

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

3 个答案: