Angular 5: TypeError: Невозможно прочитать свойство 'пароль' из неопределенного

Question

Я пытаюсь написать собственный валидатор совпадения паролей и получаю сообщение об ошибке 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>

Снимок экрана с ошибкой

Answer 1

Ошибка здесь подразумевает неопределенное «это». Попробуйте создать связанную версию функции.

this.passwordMatchValidator.bind(this)

Проблема здесь в том, что функция вызывается не сразу, а как обратный вызов, когда angular вызывает валидатор, поэтому контекст «this» теряется. .bind гарантирует, что это работает так, как вы ожидаете. Для получения дополнительной информации, пожалуйста, https://github.com/Microsoft/TypeScript/wiki/'this'-in-TypeScript