Не удалось подтвердить подтверждающий пароль с помощью angularJS2

Question

Я хочу проверить, соответствует ли пароль совпадению с текстом подтверждения пароля с помощью angularJS2, но я не могу его проверить. следующий мой код

this.userForm = this.fb.group({ 
      'username': [this.users.username, [ 
       Validators.required, 
       Validators.minLength(4), 
       Validators.maxLength(24) 
      ] 
      ], 
      'gender': [this.users.username, [Validators.required]], 
      'password': [this.users.password, [Validators.required]], 
      'confirmPassword': [this.users.password, Validators.required] 
     }, { validation: this.matchingPasswords('password', 'confirmPassword') }); 

matchingPasswords(passwordKey: string, confirmPasswordKey: string) { 
     return (group: FormGroup): { [key: string]: any } => { 
      let password = group.controls[passwordKey]; 
      let confirmPassword = group.controls[confirmPasswordKey]; 
      if (password.value !== confirmPassword.value) { 
       return { 
        mismatchedPasswords: true 
       }; 
      } 
     } 
    } 

Я прошел через различные документа и в соответствии с документом, функция mismatchedPasswords вызывается, когда мы достигаем пароль или элемент подтверждения пароля, но в моем коде этот метод не получив вызова. Я что-то упускаю?

Я включил следующие файлы

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

Answer 1

Создать новый класс для пользовательских проверок, как показано ниже

 export class ValidationService { 
     static getValidatorErrorMessage(validatorName: string, validatorValue?: any) { 
     let config = { 
     'mismatch': 'Password Mismatch.', 
    }; 
     return config[validatorName]; 
    } 
static comparePassword(control) { 
    if (control.value) { 
     if (control.root.get('passwordKey').value != control.root.get('confirmPasswordKey').value) 
     return {'mismatch': true}; 
    } 
    } 

} 

Ниже ваша обновлена ​​форма группы

import {ValidationService} from "point to yourlocation/validation.service"; 
    this.userForm = this.fb.group({ 
    'username': [this.users.username, [ 
    Validators.required, 
    Validators.minLength(4), 
    Validators.maxLength(24) 
    ] 
    ], 
    'gender': [this.users.username, [Validators.required]], 
    'password': [this.users.password, [Validators.required]], 
    'confirmPassword': [this.users.password, [Validators.required, ValidationService.passwordValidator]] 
}) 

Ниже проверка ошибка, поместите его там, где вам нужно отобразить ошибку

<md-hint align="start"> 
    <control-messages [control]="userForm .get('confirmPassword')"></control-messages> 
</md-hint> 

Наконец, ниже компонента, чтобы принести ваше сообщение об ошибке в соответствии с возвращаемым типом

import { Component, Input } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 
import {ValidationService} from " poin to ur location/validation.service"; 

@Component({ 
    selector: 'control-messages', 
    template: `<div class="field-error" *ngIf="errorMessage !== null">{{errorMessage}}</div>` 
}) 
export class ValidationComponent { 
    @Input() control: FormControl; 
    constructor() { } 

    get errorMessage() { 
    for (let propertyName in this.control.errors) { 
     if (this.control.errors.hasOwnProperty(propertyName) && (this.control.dirty || this.control.touched)) { 
     return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]); 
     } 
    } 
    return null; 
    } 
}