Setting empty values on 2 out of 3 form controls when the user uses one-CodePudding

I'm using a filter control with a filter group with three "sons", but I want that when the user selects a value in a select, the others filters set their values to empty, but when I want to use .setValue([]), it get in a infinite loop. How can I set the others filters controls as empty values?

The code when I create my formControl

this.filterForm = this.formBuilder.group({
      filters: this.formBuilder.group({
        vpr: [this.filters?.filters.vpr],
        state: [this.filters?.filters.state],
        age: [this.filters?.filters.age]
      })
    });

The code when I set the values

this.getGroupControl('filters', 'vpr').valueChanges.pipe(
      takeUntil(this.$onDestroy)
    ) .subscribe({
        next: (changes) => {
          //some actions
          this.getGroupControl('filters', 'vpr').setValue([]);
          this.getGroupControl('filters', 'state').setValue([]);
        }
      })

    this.getGroupControl('filters', 'state').valueChanges.pipe(
      takeUntil(this.$onDestroy)
    ) .subscribe({
      next: (changes) => {
        //some actions
        this.getGroupControl('filters', 'vpr').setValue([]);
        this.getGroupControl('filters', 'state').setValue([]);
      }
    })


    this.getGroupControl('filters', 'age').valueChanges.pipe(
      takeUntil(this.$onDestroy)
    ).subscribe({
      next: (changes) => {
        //some actions
        this.getGroupControl('filters', 'vpr').setValue([]);
        this.getGroupControl('filters', 'state').setValue([]);
      }
    });

    this.filterForm.valueChanges
      .pipe(debounceTime(100), takeUntil(this.$onDestroy))
      .subscribe({
        next: (changes) => {
          this.tenableStore.setFilters(this.filterForm?.getRawValue());
          //some actions
        }
      });

Thanks for your help.

CodePudding user response：

I think you are doing wrong code for valueChanges, you should get the formControl first then subscribe to their value change.

I think Below snippet should help you..

also I am sharing stackblitz example.

See stackblitz live example here

// this is Typescript code only runs with angular environment
// this is Typescript code only runs with angular environment
// this is Typescript code only runs with angular environment


this.sampleForm.get('filter.country').valueChanges.subscribe((country) => {
      if(country){
        this.sampleForm.get('filter.state').setValue('');
        this.sampleForm.get('filter.city').setValue('');
      }
 });

<!-- this code only runs with angular environment
//   this code only runs with angular environment
//   this code only runs with angular environment -->

<form [formGroup]="sampleForm">
  <ng-container formGroupName="filter">
    <select formControlName="country">
      <option *ngFor="let country of countryData" value="country">
        {{country}}
      </option>
    </select>
  </ng-container>
</form>