Пользовательский сравните валидатор пароля и это [Angular 2,4,5,6] - PullRequest
Новая
       25

Пользовательский сравните валидатор пароля и это [Angular 2,4,5,6]

0 голосов
/ 07 октября 2018

Я попытался создать валидатор пароля для сравнения 

  comparePassword():{[s:string]:boolean}{
    console.log(this.formGroup);
    const password1 = this.formGroup.value.txtPassword1;
    const password2 = this.formGroup.value.txtPassword2;

    if(password1 === password2){

      return {passwordMismatch:true}
    }
    return null;
  }

, и когда я добавил это в массив валидаторов formControl, я использовал метод связывания, чтобы он указывал на правильный контекст, но он указывал на глобальный контекст, в то время как всреда выполнения, которая приводит к ошибке при попытке доступа к this.formGroup.value.txtPassword1 и this.formGroup.value.txtPassword2, так как this.formGroup не определено 

import { Component, OnInit, EventEmitter } from '@angular/core';
import { NgbActiveModal, NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private modalService: NgbModal) { 
    this.formGroup = new FormGroup({
      txtUserName: new FormControl('', Validators.required),
      txtPassword1: new FormControl('', Validators.required),
      txtPassword2: new FormControl('', [Validators.required, this.comparePassword.bind(this)])
    });
  }
  formGroup: FormGroup;
  ngOnInit() {

  }
  closeModal:EventEmitter<String>;

  closeResult: string;
  isLogin:boolean;


  open(content,option) {
    console.log(option);
    if (option) {

      this.isLogin = option === 'Login' ? true : false;
      console.log(this.isLogin);


    }
    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
     // this.closeResult = `Closed with: ${result}`;

    }, (reason) => {
      //this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;

    });
  }

  Submit(){
    console.log(this.formGroup);
   // this.formGroup.reset();
  }

  comparePassword():{[s:string]:boolean}{
    console.log(this.formGroup);
    const password1 = this.formGroup.value.txtPassword1;
    const password2 = this.formGroup.value.txtPassword2;

    if(password1 === password2){

      return {passwordMismatch:true}
    }
    return null;
  }


}

Почему это указывает на глобальный контекстдаже после использования метода связывания

мне очень трудно понять, что когда я уравновешиваю значение этого значения внутри валидатора, внутри него есть formControl, но прилагается скриншот enter image description here

но когда я анализировал свойства объекта через for, во всем были перечислены даже свойства в цепочке прототипов, но не formGroup

Самое странное, что когда я утешаю этона самом деле внутри него есть formGroup, но если я попытаюсь получить к нему доступ, используя this.foВместо этого rmGroup дает мне неопределенное значение

Может кто-нибудь объяснить это, я думаю, что это был бы простой подход, если бы я мог найти ответ на этот вопрос, поскольку он может помочь многим людям, которые ищут простое сравнение паролей

Ответы [ 2 ]

0 голосов
/ 07 октября 2018

Похоже, что в данный момент вы привязываетесь к this, formGroup еще не полностью инициализирована (следовательно, это undefined ).

Если вы переместите проверку comparePassword на ngOnInit , она должна работать правильно.

Примерно так: 

  formGroup: FormGroup;
  constructor(private modalService: NgbModal) { 
    this.formGroup = new FormGroup({
      txtUserName: new FormControl('', Validators.required),
      txtPassword1: new FormControl('', Validators.required),
      txtPassword2: new FormControl('', Validators.required)
    });
  }

  ngOnInit() {
     this.formGroup.get('txtPassword2').setValidators(this.comparePassword.bind(this));
  }

Пример Stackblitz

0 голосов
/ 07 октября 2018

Ожидается, что пользовательский валидатор будет вызываться как минимум дважды:

  1. при создании FormControl (поэтому его статус корректен относительно его начального значения)
  2. при создании директивы FormControlName (поэтому статус можно обновлять, если в шаблоне определены директивы валидатора).
    Когда они вызываются в начале, значение еще не установлено, поэтому оно не определено

Я бы посоветовал вам обратиться к какому-то охраннику, и я бы извлек FormControl Значение следующим образом

Модифицированный код 

   comparePassword(control: FormControl): { [key: string]: boolean } {
     if (control.parent){//
    const password1 = control.parent.value['password1'];
    const password2 = control.value;
      if(password1 === password2){
         return {passwordMismatch:true}
         }
     }
    return null;
  }

Live Demo

...