Динамическая проверка формы в угловых 6 с условием и наоборот

Question

Я работаю над угловым 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 });
        });
      }

Пример