Question

我正在为ionic2创建一个用户注册，其中包含一个设置为最小长度为10的密码字段。当字符不高达10时，我想将用户显示为用户类型但是我在页面上出现此错误

Cannot read property 'hasError' of undefined

HTML

<ion-item>
          <ion-label>Password</ion-label>
          <ion-input type="number" formControlName="Password"  [(ngModel)]="Password"></ion-input>
          <div *ngIf = "Password.hasError('minlength') && !Password.hasError('required')" class = "alert alert-danger">
            <span>Password should contain 10 characters</span>
          </div>  
        </ion-item>

JS

this.registerForm = this.formBuilder.group({
                  username: [''],
                  password: ['', [Validators.required, Validators.minLength(8)]],
                });

Answer 1

您无法使用Password访问表单控件。你需要使用

registerForm.controls.password.hasError()

再说一遍。

您混合了两种方法 - Template driven表单和Reactive forms。您已使用被动表单，因此请移除ngModel部分，并仅formControlName使用password的小写变体。

<ion-input type="number" formControlName="password"></ion-input>

并且您可以使用

为该控件提供值

registerForm.patchValues({
   password: "*****"
})

Answer 2

不要混用Reactive和Template Driven表单。仅限Reactive Forms的完整示例：

<强> component.html

<form [formGroup]="registerForm">
  <ion-item>
    <ion-label>Password</ion-label>
    <ion-input type="number" formControlName="password"></ion-input>
     <div *ngIf = "passwordCtrl.hasError('minlength') && passwordCtrl.hasError('required')" class = "alert alert-danger">
       <span>Password should contain 10 characters</span>
     </div>  
 </ion-item>
</form>

<强> component.ts

this.registerForm = this.formBuilder.group({
  username: [''],
  password: ['', [Validators.required, Validators.minLength(8)]],
});

get passwordCtrl() {
  return this.registerForm.get('password');
}

angular2表单错误 - 无法读取未定义的属性'hasError'

2 个答案: