How to change validation on a Formfield depending on other Formfields?

Question

The Goal is to implement a Form, which inputfields are only required if one or more of the inputfields is filled out. If none of the fields is filled out, no field should be required. It was suggested on a website, that i should use "valueChanges" to make a listener on the fields and then implement the logic inside the listener. Then after the logic inside the listener I call the method "updateValueAndValidity()". Now here occurs the problem. If I include "updateValueAndValidity()" I get the error: Recursion Error in the Browser. I don't really understand why I get a Recursion error on this one, because I don't see where I have recursion. Probably "updateValueAndValidity()" triggers my listener again.

If I don't include "updateValueAndValidity()" I don't get the recursion error, but the logic doesn't work. I have no idea how to solve this, can someone help me?

isFormEmtpy: boolean = true;
lieferadresseForm: FormGroup;
   
onChanges() {
        let street = this.lieferadresseForm.get('street');
        let streetNumber = this.lieferadresseForm.get('streetNumber');
        let zipCode = this.lieferadresseForm.get('zipCode');
    
        this.lieferadresseForm.valueChanges.subscribe(val => {
          console.log(val);
          this.isFormEmtpy = true;
          if(val.street !== '') {
            this.isFormEmtpy = false;
          } else if(val.streetNumber !== '') {
            this.isFormEmtpy = false;
          } else if(val.zipCode !== '') {
            this.isFormEmtpy = false;
          }
    
          if(this.isFormEmtpy == false) {
            street.setValidators([Validators.required, Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.required, Validators.maxLength(10)]);
            zipCode.setValidators([Validators.required, Validators.maxLength(10)]);
          } else {
            street.setValidators([Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.maxLength(10)]);
            zipCode.setValidators([Validators.maxLength(10)]);
          }

          strasse.updateValueAndValidity();
          hausnummer.updateValueAndValidity();
          postleitzahl.updateValueAndValidity();
            
        });
      }
    
      ngOnInit() {
        this.lieferadresseForm = this.formBuilder.group({
          street: ['', Validators.maxLength(36)],
          streetNumber: ['', Validators.maxLength(10)],
          zipCode: ['', Validators.maxLength(10)]
        });
            
        this.onChanges();
    }

Answer 1

You can pass {emitEvent:false} object configuration to updateValueAndValidity method to stop triggering valueChanges observables.

Try this:

onChanges() {
        let street = this.lieferadresseForm.get('street');
        let streetNumber = this.lieferadresseForm.get('streetNumber');
        let zipCode = this.lieferadresseForm.get('zipCode');
    
        this.lieferadresseForm.valueChanges.subscribe(val => {
          console.log(val);
          this.isFormEmtpy = true;
          if(val.street !== '') {
            this.isFormEmtpy = false;
          } else if(val.streetNumber !== '') {
            this.isFormEmtpy = false;
          } else if(val.zipCode !== '') {
            this.isFormEmtpy = false;
          }
    
          if(this.isFormEmtpy == false) {
            street.setValidators([Validators.required, Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.required, Validators.maxLength(10)]);
            zipCode.setValidators([Validators.required, Validators.maxLength(10)]);
          } else {
            street.setValidators([Validators.maxLength(36)]);
            streetNumber.setValidators([Validators.maxLength(10)]);
            zipCode.setValidators([Validators.maxLength(10)]);
          }

          strasse.updateValueAndValidity({emitEvent:false});
          hausnummer.updateValueAndValidity({emitEvent:false});
          postleitzahl.updateValueAndValidity({emitEvent:false});
            
        });
      }