title: Angular: store multiple checkbox values with related textarea value
body: <p>I have a form having mutiple <code>checkbox</code> and related <code>textarea</code> fields for taking comment. Please check demo <a href="https://stackblitz.com/edit/angular-ms5fkg?file=src/app/app.component.ts" rel="nofollow noreferrer">here</a></p>
  <p>When user selects checkbox first and then enter value in comment then comment value does not get store. If user enters comment value first and then checks the checkbox then value gets added.</p>
  <p><code>textarea</code> values are <code>optional</code>. If user checks checkbox then comment should get added. if checkbox is checked and then comment is entered then comment should get added. If comment is added first and then checkbox is checked then also comment should get added. If that checkbox is uncheck then that should get remove. The behavior should be same with select/unselect all option.</p>
  <p>How should I do this?</p>
  <p><strong>Html</strong></p>
  <pre><code>&lt;div style=&quot;text-align:center&quot;&gt;
    &lt;h1&gt;
      {{ title }}
    &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;text-center mt-5&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-md-6&quot;&gt;
          &lt;ul class=&quot;list-group&quot;&gt;
            &lt;li class=&quot;list-group-item&quot;&gt;
              &lt;input
                type=&quot;checkbox&quot;
                [(ngModel)]=&quot;masterSelected&quot;
                name=&quot;list_name&quot;
                value=&quot;m1&quot;
                (change)=&quot;checkUncheckAll()&quot;
              /&gt;
              &lt;strong&gt;Select/ Unselect All&lt;/strong&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;ul class=&quot;list-group&quot;&gt;
            &lt;li class=&quot;list-group-item&quot; *ngFor=&quot;let item of checklist&quot;&gt;
              &lt;input
                type=&quot;checkbox&quot;
                [(ngModel)]=&quot;item.isSelected&quot;
                name=&quot;list_name&quot;
                value=&quot;{{ item.id }}&quot;
                (change)=&quot;isAllSelected()&quot;
              /&gt;
              &lt;textarea [(ngModel)]=&quot;item.comment&quot;&gt;{{ item.comment }}&lt;/textarea&gt;
              {{ item.value }}
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-md-6&quot;&gt;
          &lt;code&gt;{{ checkedList }}&lt;/code&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>TS</strong></p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })
  export class AppComponent {
    name = 'Angular';
    masterSelected: boolean;
    checklist: any;
    checkedList: any;
  
    constructor() {
      this.masterSelected = false;
      this.checklist = [
        { id: 1, value: 'Elenor Anderson', comment: '', isSelected: false },
        { id: 2, value: 'Caden Kunze', comment: 'test', isSelected: true },
        { id: 3, value: 'Ms. Hortense Zulauf', comment: '123', isSelected: true },
        { id: 4, value: 'Grady Reichert', comment: '', isSelected: false },
        { id: 5, value: 'Dejon Olson', comment: '', isSelected: false },
        { id: 6, value: 'Jamir Pfannerstill', comment: '', isSelected: false },
        { id: 7, value: 'Aracely Renner DVM', comment: '', isSelected: false },
        { id: 8, value: 'Genoveva Luettgen', comment: '', isSelected: false },
      ];
      this.getCheckedItemList();
    }
  
    // The master checkbox will check/ uncheck all items
    checkUncheckAll() {
      for (var i = 0; i &lt; this.checklist.length; i++) {
        this.checklist[i].isSelected = this.masterSelected;
      }
      this.getCheckedItemList();
    }
  
    // Check All Checkbox Checked
    isAllSelected() {
      this.masterSelected = this.checklist.every(function (item: any) {
        return item.isSelected == true;
      });
      this.getCheckedItemList();
    }
  
    // Get List of Checked Items
    getCheckedItemList() {
      this.checkedList = [];
      for (var i = 0; i &lt; this.checklist.length; i++) {
        if (this.checklist[i].isSelected)
          this.checkedList.push(this.checklist[i]);
      }
      this.checkedList = JSON.stringify(this.checkedList);
    }
  }
  </code></pre>
  <p>Please help and guide.</p>