Ionic2注册表单报错：Cannot read property 'hasError' of undefined

这个错误其实很好理解——你在模板里直接用了[(ngModel)]绑定的Password变量去调用hasError方法，但这个变量只是个普通的字符串/数值，并不是Angular FormControl的实例，自然没有hasError这个方法，所以才会报错。

下面给你具体的修复步骤：

1. 先在组件类里正确初始化带验证的表单 #

首先打开你的.ts文件，用FormBuilder或者直接创建FormGroup，给密码字段加上最小长度验证规则：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'page-register',
  templateUrl: 'register.html'
})
export class RegisterPage {
  registerForm: FormGroup;
  Password: string; // 这是你用ngModel绑定的变量，仅存值用

  constructor(private formBuilder: FormBuilder) {
    // 初始化表单，给Password字段设置最小长度10的验证
    this.registerForm = this.formBuilder.group({
      Password: ['', Validators.minLength(10)]
      // 其他表单字段也可以在这里添加
    });
  }

  // 可选：定义一个getter，让模板里的代码更简洁
  get passwordControl() {
    return this.registerForm.get('Password');
  }
}

2. 修改模板中的错误提示逻辑 #

接下来调整你的HTML代码，要通过表单实例获取对应的FormControl，而不是直接用ngModel的变量：

方式一：直接通过表单的get方法调用 #

<form [formGroup]="registerForm">
  <ion-item>
    <ion-label>Password</ion-label>
    <!-- 注意这里type改成password更合理，毕竟密码不是纯数字 -->
    <ion-input type="password" formControlName="Password" [(ngModel)]="Password"></ion-input>
    <!-- 用表单实例获取控件后再判断错误，加上touched确保用户触碰后才提示 -->
    <div *ngIf="registerForm.get('Password').hasError('minlength') && registerForm.get('Password').touched">
      密码长度不能少于10位
    </div>
  </ion-item>
</form>

方式二：用组件中定义的getter（更推荐，代码更清爽） #

如果已经定义了passwordControl这个getter，模板可以简化成：

<form [formGroup]="registerForm">
  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="password" formControlName="Password" [(ngModel)]="Password"></ion-input>
    <div *ngIf="passwordControl.hasError('minlength') && passwordControl.touched">
      密码长度不能少于10位
    </div>
  </ion-item>
</form>

小提醒 #

• 把ion-input的type从number改成password更符合密码输入的场景；
• 加上touched或者dirty判断，能避免页面刚加载就显示错误提示，提升用户体验。

内容的提问来源于stack exchange，提问作者user6579134