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 });
        });
      }

Example

带有条件的角度6中的动态表单验证，反之亦然

1 个答案: