代码之家 › 专栏 › 技术社区 › codefreaK

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

angular2-directives angular2-forms angular

3

codefreaK · 技术社区 · 7 年前

  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的validators数组中时我使用了bind方法,因此它指向正确的上下文,但在运行时它指向全局上下文,这导致我尝试访问时出错 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;
  }


}

为什么在使用bind方法之后仍然指向全局上下文

当我从验证器内部控制台这个值时,它里面有formControl,但是附加了屏幕截图

最奇怪的是,当我控制台this时,它实际上在里面有formGroup,但是如果我尝试使用this.formGroup访问它,它会给我未定义的结果

有人能解释一下吗?我想如果我能找到答案的话,这将是一个简单的方法,因为它有可能帮助许多人寻找简单的密码比较

2 回复 | 直到 7 年前

1

miselking 7 年前

现在看来,你正与 this 窗体组 尚未完全初始化(因此 未定义 ).

如果你搬家 comparePassword 验证到它应该能正常工作。

像这样:

  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 example

2

1

Vikas RyanSand20 7 年前

当 FormControl
当 FormControlName 指令已创建(因此状态可以是
当它们在开始时被调用时,值还没有设置,这就是为什么它没有定义

窗体控件 按以下方式计算值

修改后的代码

   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