angular 6 中的動態表單驗證有條件，反之亦然

Question

我正在使用動態表單驗證處理 angular 6。 我有三個表單gender ，最初需要驗證； 要動態驗證的ageFrom和ageTo 。 如果首先輸入ageFrom值，則需要對ageTo進行驗證，而當首次輸入ageTo值時，則需要對ageFrom進行驗證。 我的代碼如下：

this.formGroup = this.fb.group({
          ageTo: [''],
          ageFrom: [''],
          gender: new FormControl('', Validators.required),

      });

      const ageFrom = <FormControl>this.formGroup.get('ageFrom');
      const ageTo = <FormControl>this.formGroup.get('ageTo');

      this.subscription = ageFrom.valueChanges.subscribe(value => {
          if (value) {
              ageTo.setValidators([Validators.required,]);
          } else {
              ageTo.setValidators([Validators.nullValidator,]);
          }
          this.formGroup.updateValueAndValidity();
      });

      this.subscription = ageTo.valueChanges.subscribe(value => {
          if (value) {
              ageFrom.setValidators([Validators.required,]);
          } else {
              ageFrom.setValidators([Validators.nullValidator,]);
          }
          this.formGroup.updateValueAndValidity();
      });

在此代碼之后，它繼續無限循環。 它給出了ERROR RangeError: Maximum call stack size exceeded我怎樣才能解決有條件的，反之亦然的動態表單驗證。

Answer 1

將 emitEvent false 設置為 updateValueandValidity 方法。

 ngAfterViewInit() {
        const ageFrom = <FormControl>this.formGroup.get("ageFrom");
        const ageTo = <FormControl>this.formGroup.get("ageTo");

        ageFrom.valueChanges.subscribe(value => {
          console.log(value, "ageFrom");
          if (value) {
            ageTo.setValidators(Validators.required);
          } else {
            ageTo.setValidators(Validators.nullValidator);
          }
          ageTo.updateValueAndValidity({ emitEvent: false });
        });

        ageTo.valueChanges.subscribe(value => {
          console.log(value, "ageTo");
          if (value) {
            ageFrom.setValidators(Validators.required);
          } else {
            ageFrom.setValidators(Validators.nullValidator);
          }
          ageFrom.updateValueAndValidity({ emitEvent: false });
        });
      }

例子