angular - 自定义比较密码验证器和这个 [Angular 2,4,5,6]

Question

我尝试创建一个比较密码验证器

  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;
  }

当我将 this 添加到 formControl 的验证器数组时，我使用了 bind 方法，以便 this 指向正确的上下文，但它在运行时指向全局上下文，这会在我尝试访问 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;
  }


}

为什么即使在使用绑定方法之后 this 仍指向全局上下文

我很难理解的是，当我从验证器内部控制 this 的值时，它里面有 formControl 但附上截图

但是当我通过 for 解析对象属性时，甚至列出了原型链中的属性，但没有列出 formGroup

最奇怪的是，当我控制台 this 它实际上有 formGroup 里面，但是如果我尝试使用 this.formGroup 访问它它给了我 undefined 代替

谁能解释一下我认为如果我能找到答案，这将是一种简单的方法，因为它有可能帮助很多人寻找简单的密码比较

标签： angularangular2-formsangular2-directives

Answer 1

预计自定义验证器至少会被调用两次：

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