title: Reactive forms - On valueChanges subscribe / update checkbox options
body: <p>What I am trying to achieve is something like this, I have a result set with three options bmw, audi and opel, in the select I can only select one of the options, but if needed the user can still select not selected options(checkboxes)
  Result set:</p>
  
  <pre><code>cars = [
      { id: 1, name: 'bmw' },
      { id: 2, name: 'audi' },
      { id: 3, name: 'opel' }
  ];
  </code></pre>
  
  <p>Flow:</p>
  
  <p>For example, lets say in the select I have selected <strong>bmw</strong>, so after the select I need to show two checkboxes, because <strong>audi</strong> &amp; <strong>opel</strong> is still available options. If I change <strong>bmw</strong> to something else I also need to update the checkboxes to show those values what's not selected in the select.</p>
  
  <p>form:</p>
  
  <pre><code>this.firstStepForm = this.fb.group({
    cars: [''], // select
    models: this.fb.array([]) // checkboxes
  });
  </code></pre>
  
  <p>Setup checkboxes:</p>
  
  <pre><code>private setupControls(details: any): void {
  let control = &lt;FormArray&gt;this.firstStepForm.controls.models;
  
  details.forEach(x =&gt; {
    control.push(this.fb.group({
      id: x.id,
      name: x.name
    }))
  })
  </code></pre>
  
  <p>Subscribe for changes:</p>
  
  <pre><code>this.firstStepForm.get('cars').valueChanges.subscribe((carId: number)
  </code></pre>
  
  <p>A simple example - <a href="https://stackblitz.com/edit/on-select-change-update-checkboxes" rel="nofollow noreferrer">stackblitz</a></p>
  
  <p>At the moment, I don't really understand how to get the index of the specific car(selected in the select) and update/remove checkboxes.</p>
  
  <p>Result:</p>
  
  <ol>
  <li>checkboxes only show the options that are not selected in the select</li>
  <li>if I change the selected value to something else, I need to update checkboxes to show options what's left from the result set.</li>
  </ol>
  
  <p>Comments:</p>
  
  <p>Maybe I don't even need to use <strong>removeAt</strong>(FormArray), but just a simple underscoreJs _filter &amp; filter out based on the id? But how can I filter out FormArray based on specific value(:id)?</p>
  
  <pre><code>let magic = _.filter(arr, function (num) { return num != carId });
  
  console.log('magic: ', magic);
  </code></pre>