Angular 10 - Convert FormControl array values to Strings separated with commas

Question

EDIT 1 :

I modify my question to clarify my need.

I have a FormGroup that contains FormControl.

Among these FormControl, there is one that receives an array values.

What I'm looking for is if there is a solution to make the FormControl that receives an array values instead receive values in a comma separated string value (without the brackets [] ).

What I get : ( Array Values )

What I want : ( String values separated with comma without brackets[] )

Link of the fork : Here

• Thank you in advance for your help

Original Question :

I would like to convert the data received from a FormArray to Strings with commas.

I managed to do this in Console.log, but I don't know how to send the converted data to the FormGroup.

My TS file :

  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) => {
        if (item.value == event.target.value) {
          checkAcs.removeAt(i);
              return;
        }
        i++;
      });
    }
  }

My HTML :

  <ul class="list-group list-group-flush">
    <li class="list-group-item p-3">
      Ventilateur cabine
      <label class="switch">
        <input type="checkbox" value="Ventilateur cabine" class="primary"
          (change)="onCheckboxChange($event)" />
        <span class="slider"></span>
      </label>
    </li>
    <li class="list-group-item p-3">
      Manoeuvre pompier
      <label class="switch">
        <input type="checkbox" class="primary" value="Manoeuvre pompier"
          (change)="onCheckboxChange($event)" />
        <span class="slider"></span>
      </label>
    </li>
    <li class="list-group-item p-3">
      Afficheur à tous les étages
      <label class="switch">
        <input type="checkbox" class="primary" value="Afficheur à tous les étages"
         (change)="onCheckboxChange($event)" />
        <span class="slider"></span>
      </label>
    </li>
    <li class="list-group-item p-3">
      Gong
      <label class="switch">
        <input type="checkbox" class="primary" value="Gong"
          (change)="onCheckboxChange($event)" />
          <span class="slider"></span>
      </label>
    </li>
    <li class="list-group-item p-3">
      Système de secours automatique
      <label class="switch">
        <input type="checkbox" class="primary" value="Système de secours automatique"
           (change)="onCheckboxChange($event)" />
        <span class="slider"></span>
      </label>
    </li>
  </ul>

When I follow these steps, I get null on " Accessoire " and array values on " Accessoires ".

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.

Thank you in advance for your solutions.

EDIT 1 :

I used the first Option of @akash solution and it's working. I have just a little problem. When i get the values selected on an input, and I want to send it to a formControl ... I get the array form with brackets ... What I want is string form with commas. here's the link of my problem: https://stackblitz.com/edit/reactive-form-string-values

Answer 1

<mat-select 
      [value]="toppings.value?toppings?.value.split(','):null" 
      (selectionChange)="toppings.setValue($event.value.join(','))"
       multiple>
...
</mat-select>

Remember a FormControl exist even you has no input. Well, you need rewrite all your code to received an string, some like this forked stackblitz