title: Combine multiple form control observables and subscribe in a reactive form
body: <p>I have a form with multiple input fields (Eg: CID,LastName,FirstName,etc.). Requirement is to give one input on form submit. So on entering input in any of the fields values in the fields other than the entered field needs to be cleared</p>
  
  <p>Instead of subscribing valuechanges for all the controls I plan to use some operators in Rxjs to combine it and use only one subscribe. What I found is combineLatest. So I just pushed all the controls into an array and planned to pass to combineLatest operator.</p>
  
  <p>I have created a stackblitz. <a href="https://stackblitz.com/edit/angular-xeqms6?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-xeqms6?file=src%2Fapp%2Fapp.component.ts</a></p>
  
  <pre><code>handleFormChanges(){
  
      const controlArr=[];
      for (const field in this.formControls) {
        controlArr.push(this.formEl.get(field).valueChanges);
      }
  
        combineLatest(controlArr)
         .pipe(map(control=&gt;{
           startWith('')
          return control;
         }))
        .subscribe((value)=&gt;{
  
          // Here I need to write the logic to clear input fields other than the current one.
          console.log(value);
  
        })
    }
  </code></pre>
  
  <p>Problem with the code above is that subscribe is first triggered only after values are entered in all the field at least once. Subsequent triggers are working as expected.</p>
  
  <p>What I needed is on every valuechanges subscribe callback needs to be invoked</p>