我尝试创建一个比较密码验证器
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 的验证器数组时 我使用了 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;
}
}
为什么即使在使用 bind 方法后 this 仍指向全局上下文
让我很难理解的是 当我从验证器内部控制这个值时,它里面有 formControl 但附上截图
但是当我通过 for in 解析对象属性时,所有内容都被列出,甚至是原型(prototype)链中的属性,而不是 formGroup
最奇怪的是,当我对 this 进行控制台操作时,它实际上在其中包含 formGroup,但是如果我尝试使用 this.formGroup 访问它,它会给我 undefined
谁能解释一下我认为如果我能找到答案这将是一个简单的方法,因为它有可能帮助很多人寻找简单的密码比较
最佳答案
似乎在您绑定(bind)到 this
时,formGroup 尚未完全初始化(因此它是未定义)。
如果将 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));
}
关于angular - 自定义比较密码验证器和这个 [Angular 2,4,5,6],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52688892/