angular – RangeError：使用valueChanges.subscribe时超出最大调用堆栈大小

我正在使用带有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？

thiS.UserForm.get('loginTypEID').valueChanges.subscribe(
  (loginTypEID: String) => {
    ...
    thiS.UserForm.get('loginTypEID').updateValueAndValidity(); <-- triggers valueChanges!
}