我正在使用带有Reactive表单的Angular 5,并且需要使用valueChanges来动态地禁用所需的验证
组件类：
export class UserEditor implements OnInit {
public userForm: FormGroup;
userName: FormControl;
firstName: FormControl;
lastName: FormControl;
email: FormControl;
loginTypeId: FormControl;
password: FormControl;
confirmPassword: FormControl;
...
ngOnInit() {
this.createFormControls();
this.createForm();
this.userForm.get('loginTypeId').valueChanges.subscribe(
(loginTypeId: string) => {
console.log("log this!");
if (loginTypeId === "1") {
console.log("disable validators");
Validators.pattern('^[0-9]{5}(?:-[0-9]{4})?$')]);
this.userForm.get('password').setValidators([]);
this.userForm.get('confirmPassword').setValidators([]);
} else if (loginTypeId === '2') {
console.log("enable validators");
this.userForm.get('password').setValidators([Validators.required,Validators.minLength(8)]);
this.userForm.get('confirmPassword').setValidators([Validators.required,Validators.minLength(8)]);
}
this.userForm.get('loginTypeId').updateValueAndValidity();
}
)
}
createFormControls() {
this.userName = new FormControl('',[
Validators.required,Validators.minLength(4)
]);
this.firstName = new FormControl('',Validators.required);
this.lastName = new FormControl('',Validators.required);
this.email = new FormControl('',[
Validators.required,Validators.pattern("[^ @]*@[^ @]*")
]);
this.password = new FormControl('',[
Validators.required,Validators.minLength(8)
]);
this.confirmPassword = new FormControl('',Validators.minLength(8)
]);
}
createForm() {
this.userForm = new FormGroup({
userName: this.userName,name: new FormGroup({
firstName: this.firstName,lastName: this.lastName,}),email: this.email,loginTypeId: this.loginTypeId,password: this.password,confirmPassword: this.confirmPassword
});
}
但是,当我运行它时,我得到一个浏览器javascript错误
UserEditor.html:82 ERROR RangeError: Maximum call stack size exceeded
at SafeSubscriber.tryCatcher (tryCatch.js:9)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscription.js.Subscription.unsubscribe (Subscription.js:68)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.unsubscribe (Subscriber.js:124)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:242)
at SafeSubscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.SafeSubscriber.next (Subscriber.js:186)
at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber._next (Subscriber.js:127)
at Subscriber.webpackJsonp.../../../../rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:91)
at EventEmitter.webpackJsonp.../../../../rxjs/_esm5/Subject.js.Subject.next (Subject.js:56)
at EventEmitter.webpackJsonp.../../../core/esm5/core.js.EventEmitter.emit (core.js:4319)
at FormControl.webpackJsonp.../../../forms/esm5/forms.js.AbstractControl.updateValueAndValidity (forms.js:3377)
“记录这个！”被重复记录,就像它被称为递归调用一样,这就是为什么它们是一个堆栈错误
如果我删除valueChanges.subscribe代码工作除了有条件地删除验证.
为什么递归调用valueChanges.subscribe？
问题是您修改了同一字段的valueChanges事件处理程序内的字段值,导致事件再次被触发：
this.userForm.get('loginTypeId').valueChanges.subscribe(
(loginTypeId: string) => {
...
this.userForm.get('loginTypeId').updateValueAndValidity(); <-- Triggers valueChanges!
}
