Angular 5:TypeError:无法读取未定义的属性“密码”

tmott13

我正在尝试编写一个自定义密码匹配验证器,当我输入两个不同的密码时,我在控制台中收到了 TypeError。我正在使用 Angular Material 控件并使用类进行验证。如果可能,我想避免使用 ReactiveForms 和 FormGroup。我一直在尝试几种方法,但无法使确认密码方法起作用。任何帮助将不胜感激!谢谢!

打字稿:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from "@angular/forms";
import { Router } from '@angular/router';

@Component({
    templateUrl: './password-reset.component.html',
    styleUrls: ['./password-reset.component.css']
})
export class PasswordResetComponent {
    hide = true;
    imageSrc = '../../assets/images/logo.png';
    password = new FormControl('', [Validators.required, 
     Validators.minLength(8)]);
    confirm_password = new FormControl('', [Validators.required, 
    Validators.minLength(8)], this.passwordMatchValidator);


    passwordMatchValidator(FormControl) {
       return this.password.value !== this.confirm_password.value
       ? null : { 'mismatch': true };
    }
     getPasswordErrorMessage() {
       return this.password.hasError('required') ? 'Please enter a password' 
         :
        this.password.hasError('minlength') ? 'Password must be at least 8 
         characters' :

        '';
     }
   getConfirmPasswordErrorMessage() {
      return this.confirm_password.hasError('required') ? 'Please enter a 
      password' :
      this.confirm_password.hasError('minlength') ? 'Password must be at 
       least 8 characters' :
       this.confirm_password.hasError(this.passwordMatchValidator) ? 
      'Passwords must match' :

        '';
     }


  }

HTML:

 <div class="form-group">
      <mat-form-field class="justifier">
        <input matInput placeholder="Password" [formControl]="password" [type]="hide ? 'password' : 'text'" required>
        <mat-error *ngIf="password.invalid && (password.dirty || password.touched)">{{getPasswordErrorMessage()}}</mat-error>
        <mat-icon class="pw mat-icon2" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      </mat-form-field>
    </div>
    <div class="form-group">
      <mat-form-field class="justifier">
        <input matInput placeholder="Confirm Password" [formControl]="confirm_password" [type]="hide ? 'password' : 'text'" required>
        <mat-error *ngIf="confirm_password.invalid || password.value !== confirm_password.value || (confirm_password.dirty || confirm_password.touched)">{{getConfirmPasswordErrorMessage()}}</mat-error>
        <!--<mat-error *ngIf=" password.value !== confirm_password.value">both passwords must match!</mat-error>-->

        <mat-icon class="pw mat-icon2" matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      </mat-form-field>
    </div>

错误截图

汤姆

此处的错误意味着未定义的“this”。尝试创建函数的绑定版本。

this.passwordMatchValidator.bind(this)

这里的问题是该函数不会立即调用,而是作为 angular 调用验证器时的回调,因此“this”上下文丢失了。.bind 确保它按您的预期工作。欲了解更多信息,请https://github.com/Microsoft/TypeScript/wiki/ 'this'-in-TypeScript

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular用密码输入抛出“ Uncaught TypeError:无法读取未定义的属性'charAt'”

来自分类Dev

Angular TypeError:无法读取未定义的属性“ then”

来自分类Dev

TypeError:无法读取未定义<Angular 8>的属性'map'

来自分类Dev

Angular:无法读取未定义TypeError的属性“ routeConfig”

来自分类Dev

Angular 9 TypeError:无法读取未定义的属性“ subscribe”

来自分类Dev

Angular Material TypeError:无法读取未定义的属性“ id”

来自分类Dev

Angular / Karma TypeError:无法读取未定义的属性“ offsetTop”

来自分类Dev

Angular TypeError无法读取未定义的属性“ then”

来自分类Dev

NativeScript/Angular - TypeError:无法读取未定义的属性“符号”

来自分类Dev

Angular - TypeError:无法读取未定义的属性“推送”

来自分类Dev

Angular - TypeError:无法读取未定义的属性“订阅”

来自分类Dev

Angular 6:TypeError:无法读取未定义的属性“值”

来自分类Dev

Angular 5 无法读取未定义的属性“目标”

来自分类Dev

Angular无法读取未定义的属性

来自分类Dev

TypeError:添加自定义验证器时,无法读取未定义Angular的属性'indexOf'

来自分类Dev

Angular2-TypeError:无法读取(Typescript)中未定义的属性'Id'

来自分类Dev

Angular 2异常:TypeError:无法读取未定义的属性“ annotations”

来自分类Dev

Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

来自分类Dev

TypeError:无法读取未定义的Angular.js的属性“ get”

来自分类Dev

NgZone / Angular2 / Ionic2 TypeError:无法读取未定义的属性“运行”

来自分类Dev

Angular 8:ERROR TypeError:无法读取未定义的属性“无效”

来自分类Dev

Angular 8错误TypeError:无法读取未定义的属性“名称”

来自分类Dev

Angular 9-错误TypeError:无法读取未定义的属性“名称”

来自分类Dev

Angular 7-错误错误:未捕获(承诺):TypeError:无法读取未定义的属性“ forEach”

来自分类Dev

错误TypeError:无法读取Angular 8中未定义的属性“值”

来自分类Dev

错误TypeError:无法读取未定义的Angular Firebase的属性'title'

来自分类Dev

TypeError:无法读取Angular 8中未定义的属性“ reduce”

来自分类Dev

Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

来自分类Dev

Angular服务给出“ TypeError:无法读取未定义的属性'helloConsole'”

Related 相关文章

  1. 1

    Angular用密码输入抛出“ Uncaught TypeError:无法读取未定义的属性'charAt'”

  2. 2

    Angular TypeError:无法读取未定义的属性“ then”

  3. 3

    TypeError:无法读取未定义<Angular 8>的属性'map'

  4. 4

    Angular:无法读取未定义TypeError的属性“ routeConfig”

  5. 5

    Angular 9 TypeError:无法读取未定义的属性“ subscribe”

  6. 6

    Angular Material TypeError:无法读取未定义的属性“ id”

  7. 7

    Angular / Karma TypeError:无法读取未定义的属性“ offsetTop”

  8. 8

    Angular TypeError无法读取未定义的属性“ then”

  9. 9

    NativeScript/Angular - TypeError:无法读取未定义的属性“符号”

  10. 10

    Angular - TypeError:无法读取未定义的属性“推送”

  11. 11

    Angular - TypeError:无法读取未定义的属性“订阅”

  12. 12

    Angular 6:TypeError:无法读取未定义的属性“值”

  13. 13

    Angular 5 无法读取未定义的属性“目标”

  14. 14

    Angular无法读取未定义的属性

  15. 15

    TypeError:添加自定义验证器时,无法读取未定义Angular的属性'indexOf'

  16. 16

    Angular2-TypeError:无法读取(Typescript)中未定义的属性'Id'

  17. 17

    Angular 2异常:TypeError:无法读取未定义的属性“ annotations”

  18. 18

    Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

  19. 19

    TypeError:无法读取未定义的Angular.js的属性“ get”

  20. 20

    NgZone / Angular2 / Ionic2 TypeError:无法读取未定义的属性“运行”

  21. 21

    Angular 8:ERROR TypeError:无法读取未定义的属性“无效”

  22. 22

    Angular 8错误TypeError:无法读取未定义的属性“名称”

  23. 23

    Angular 9-错误TypeError:无法读取未定义的属性“名称”

  24. 24

    Angular 7-错误错误:未捕获(承诺):TypeError:无法读取未定义的属性“ forEach”

  25. 25

    错误TypeError:无法读取Angular 8中未定义的属性“值”

  26. 26

    错误TypeError:无法读取未定义的Angular Firebase的属性'title'

  27. 27

    TypeError:无法读取Angular 8中未定义的属性“ reduce”

  28. 28

    Webpacked Angular2应用程序TypeError:无法读取未定义的属性“ getOptional”

  29. 29

    Angular服务给出“ TypeError:无法读取未定义的属性'helloConsole'”

热门标签

归档