自定义比较密码验证器和这个 [Angular 2,4,5,6]
Custom compare password validator and this [Angular 2,4,5,6]
我尝试创建一个比较密码验证器
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;
}
}
为什么即使在使用绑定方法后 this 仍指向全局上下文
我很难理解的是
当我从验证器内部控制这个值时,它里面有 formControl 但附上截图
但是当我通过 for in 解析对象属性时,所有内容都被列出,甚至是原型链中的属性而不是 formGroup
最奇怪的是,当我对它进行控制台操作时,它实际上在其中包含 formGroup,但是如果我尝试使用 this.formGroup 访问它,它会给我未定义的
谁能解释一下我认为如果我能找到答案这将是一个简单的方法,因为它有可能帮助很多人寻找简单的密码比较
预计自定义验证器至少会被调用两次:
- 创建
FormControl
时(因此它的状态在
与其初始值的关系)
- 创建
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;
}
似乎在您绑定到 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));
}
我尝试创建一个比较密码验证器
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;
}
}
为什么即使在使用绑定方法后 this 仍指向全局上下文
我很难理解的是
当我从验证器内部控制这个值时,它里面有 formControl 但附上截图
但是当我通过 for in 解析对象属性时,所有内容都被列出,甚至是原型链中的属性而不是 formGroup
最奇怪的是,当我对它进行控制台操作时,它实际上在其中包含 formGroup,但是如果我尝试使用 this.formGroup 访问它,它会给我未定义的
谁能解释一下我认为如果我能找到答案这将是一个简单的方法,因为它有可能帮助很多人寻找简单的密码比较
预计自定义验证器至少会被调用两次:
- 创建
FormControl
时(因此它的状态在 与其初始值的关系) - 创建
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;
}
似乎在您绑定到 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));
}