title: Angular 10 - Convert FormControl array values to Strings separated with commas
body: <h2>EDIT 1 :</h2>
  <p>I modify my question to clarify my need.</p>
  <p>I have a <code>FormGroup</code> that contains <code>FormControl</code>.</p>
  <p>Among these <code>FormControl</code>, there is one that receives an array values.</p>
  <p>What I'm looking for is if there is a solution to make the <code>FormControl</code> that receives an array values instead receive values in a comma separated string value (without the brackets <code>[]</code> ).</p>
  <h3>What I get :  ( Array Values )</h3>
  <p><a href="https://i.stack.imgur.com/5PFbt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5PFbt.png" alt="Array Values" /></a></p>
  <h3>What I want : ( String values separated with comma without <code>brackets[]</code> )</h3>
  <p><a href="https://i.stack.imgur.com/ioGOr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ioGOr.png" alt="enter image description here" /></a></p>
  <p>Link of the fork : <a href="https://stackblitz.com/edit/reactive-form-string-values" rel="nofollow noreferrer">Here</a></p>
  <ul>
  <li>Thank you in advance for your help</li>
  </ul>
  <h2><strong>Original Question :</strong></h2>
  <p>I would like to convert the data received from a <code>FormArray</code> to Strings with commas.</p>
  <p>I managed to do this in Console.log, but I don't know how to send the converted data to the <code>FormGroup</code>.</p>
  <p>My TS file :</p>
  <pre class="lang-js prettyprint-override"><code>  accessoire: string;
    this.demandeDevis = this.formBuilder.group({
      accessoires: new FormArray([]),
      accessoire: this.accessoire,
    });
  
    onCheckboxChange(event) {
      const checkAcs: FormArray = this.demandeDevis.get(
        'accessoires'
      ) as FormArray;
      
      if (event.target.checked) {
        checkAcs.push(new FormControl(event.target.value));
        console.log(checkAcs.value.toString());
        this.accessoire = checkAcs.value.toString();
      } else {
        let i: number = 0;
        checkAcs.controls.forEach((item: FormControl) =&gt; {
          if (item.value == event.target.value) {
            checkAcs.removeAt(i);
                return;
          }
          i++;
        });
      }
    }
  </code></pre>
  <p>My <code>HTML</code> :</p>
  <pre class="lang-html prettyprint-override"><code>  &lt;ul class=&quot;list-group list-group-flush&quot;&gt;
      &lt;li class=&quot;list-group-item p-3&quot;&gt;
        Ventilateur cabine
        &lt;label class=&quot;switch&quot;&gt;
          &lt;input type=&quot;checkbox&quot; value=&quot;Ventilateur cabine&quot; class=&quot;primary&quot;
            (change)=&quot;onCheckboxChange($event)&quot; /&gt;
          &lt;span class=&quot;slider&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-group-item p-3&quot;&gt;
        Manoeuvre pompier
        &lt;label class=&quot;switch&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;primary&quot; value=&quot;Manoeuvre pompier&quot;
            (change)=&quot;onCheckboxChange($event)&quot; /&gt;
          &lt;span class=&quot;slider&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-group-item p-3&quot;&gt;
        Afficheur à tous les étages
        &lt;label class=&quot;switch&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;primary&quot; value=&quot;Afficheur à tous les étages&quot;
           (change)=&quot;onCheckboxChange($event)&quot; /&gt;
          &lt;span class=&quot;slider&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-group-item p-3&quot;&gt;
        Gong
        &lt;label class=&quot;switch&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;primary&quot; value=&quot;Gong&quot;
            (change)=&quot;onCheckboxChange($event)&quot; /&gt;
            &lt;span class=&quot;slider&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li class=&quot;list-group-item p-3&quot;&gt;
        Système de secours automatique
        &lt;label class=&quot;switch&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;primary&quot; value=&quot;Système de secours automatique&quot;
             (change)=&quot;onCheckboxChange($event)&quot; /&gt;
          &lt;span class=&quot;slider&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  <p>When I follow these steps, I get <code>null</code> on &quot; Accessoire &quot; and array values on &quot; Accessoires &quot;.</p>
  <p>What I'm looking for is to take the values chosen from a checkbox list and convert them to strings with commas. I don't want to send them in Arrays form.</p>
  <p>Thank you in advance for your solutions.</p>
  <p><strong>EDIT 1 :</strong></p>
  <p>I used the first Option of <strong>@akash</strong> solution and it's working. I have just a little problem. When i get the values selected on an <code>input</code>, and I want to send it to a <code>formControl</code> ... I get the array form with brackets ... What I want is string form with commas. here's the link of my problem:
  <a href="https://stackblitz.com/edit/reactive-form-string-values" rel="nofollow noreferrer">https://stackblitz.com/edit/reactive-form-string-values</a></p>