web-dev-qa-db-ja.com

RangeError：valueChanges.subscribeの使用時に最大呼び出しスタックサイズを超えました

私は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.required,
        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を再帰的に呼び出すのですか？

angulartypescriptangular5angular-reactive-forms
14
dfmetro

問題は、同じフィールドのvalueChangesイベントハンドラー内のフィールドの値を変更すると、イベントが再度トリガーされることです。

this.userForm.get('loginTypeId').valueChanges.subscribe(
  (loginTypeId: string) => {
    ...
    this.userForm.get('loginTypeId').updateValueAndValidity(); <-- Triggers valueChanges!
}
10
ConnorsFan

実際、フォームの変更をサブスクライブし、その内部でpatchValueを実行する場合は、patchValueに{emitEvent：false}オプションを追加するだけです。したがって、パッチは別の変更検出をトリガーしません。

コード：

this.formGroup
    .valueChanges
    .subscribe( _ => {
        this.formGroup.get( 'controlName' ).patchValue( _val, {emitEvent: false} );
    } );

PS。これは、各フォームコントロールを1つずつサブスクライブして、変更の呼び出しが最大コールスタックを超えないようにするための退屈な作業でもありません。特に、フォームにサブスクライブするコントロールが100個ある場合。

さらに詳しく説明すると、サブスクリプション内でまだValueValueValidityを更新する必要がある場合は、distinctUntilChanged rxjs演算子を使用して、値が変更されたときにのみサブスクリプションを実行することをお勧めします。

デフォルトでは、distinctUntilChangedはオブジェクトをポインターで検証し、ポインターはすべての変更で新しいため、カスタム検証関数にする必要があります。

this.formGroup
    .valueChanges
    .distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b))
    .subscribe( _ => {
        this.formGroup.get( 'controlName' ).patchValue( _val, {emitEvent: false} );
        this.formGroup.get( 'controlName' ).updateValueAndValidity();
    } );

そして、できれば、最大の呼び出しスタックに達することなく、パッチを適用して更新しています！

13
Karl Johan Vallner

distinctUntilChanged()の直前のパイプラインでsubscribe()を追加してみてください。値が実際に変更されなかった「変更」イベントを除外する必要があります。

11
Alexander Leonov

私の答えは this one の開発です。

distinctUntilChanged()をパイプラインのsubscribe()の直前に追加することにより、「最大呼び出しスタックサイズを超えました」という事態を回避できます。

distinctUntilChangedメソッドは、現在の値が最後の値と異なる場合にのみ発行します。

使用法：

this.userForm.get('password')
  .valueChanges.pipe(distinctUntilChanged())         
  .subscribe(val => {})

ドキュメント

10
mpro