title: Delete an object created when another checkbox is selected in the same row in angular
body: <p>I have a simple table with descriptions and two columns representing a state: YES and NO.</p>
  <p><a href="https://i.stack.imgur.com/DZaZw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DZaZw.png" alt="table" /></a></p>
  <p>Each checkbox represents an object in which it includes the &quot;Condition&quot; property that is null at startup. Depending on what is marked, an array of objects is formed. What I want to do is that when another checkbox in the same row is selected, delete the previously created object. Without affecting the other rows.</p>
  <p>For example when I select a checkbox:</p>
  <p><a href="https://i.stack.imgur.com/ARJj8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARJj8.png" alt="check1" /></a></p>
  <p>And by selecting the other checkbox, I would like to delete the previous object</p>
  <p><a href="https://i.stack.imgur.com/U0Vfw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0Vfw.png" alt="check2" /></a></p>
  <p>I was playing around with the event checked and change to prevent the user from selecting the two checkboxes in the same row. Also to delete the created object by unchecking a selected checkbox, making the &quot;Condition&quot; true or false.</p>
  <p>I have a demo on stackblitz: <a href="https://stackblitz.com/edit/angular-bk9zpg" rel="nofollow noreferrer">Demo</a></p>
  <p>.HTML</p>
  <pre><code>&lt;form [formGroup]=&quot;demoFormGroup&quot; style=&quot;margin-top:20px; margin-bottom:30px&quot;&gt;
    &lt;div formArrayName=&quot;info&quot;&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;th&gt;&lt;/th&gt;
          &lt;th&gt;YES&lt;/th&gt;
          &lt;th&gt;NO&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr *ngFor=&quot;let x of data; let i = index&quot;&gt;
          &lt;td&gt;{{x.Description}}&lt;/td&gt;
          &lt;td&gt;
            &lt;mat-checkbox
              (change)=&quot;onChange($event,x,true)&quot;
              [checked]=&quot;x.Condition&quot;
            &gt;&lt;/mat-checkbox&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;mat-checkbox
              (change)=&quot;onChange($event,x,false)&quot;
              [checked]=&quot;x.Condition != null &amp;&amp; !x.Condition&quot;
            &gt;&lt;/mat-checkbox&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  &lt;pre&gt;{{ demoFormGroup.get('info')?.value | json }}&lt;/pre&gt;
  </code></pre>
  <p>.TS</p>
  <pre><code>import { Component } from '@angular/core';
  import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    demoFormGroup: FormGroup;
    data: any;
    constructor(private fb: FormBuilder) {}
  
    ngOnInit() {
      this.demoFormGroup = this.fb.group({
        info: this.fb.array([])
      });
  
      this.data = [
        {
          Id: 4,
          Description: 'Option 1',
          Condition: null
        },
        {
          Id: 6,
          Description: 'Option 2',
          Condition: null
        }
      ];
    }
  
    onChange(event: any, option: any, enabled: boolean) {
      option.Condition = enabled;
      const ctrl = (&lt;FormArray&gt;this.demoFormGroup.get('info')) as FormArray;
      if (event.checked) {
        ctrl.push(new FormControl(option));
      } else {
        this.removeObject(ctrl, event);
      }
    }
    removeObject(ctrl: any, event: any) {
      const i = ctrl.controls.findIndex(
        (x: any) =&gt; x.value === event.source.value
      );
      ctrl.removeAt(i);
    }
  }
  </code></pre>