Friday, 9 October 2020

Angular 10 - Convert FormArray values to Strings with commas

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 do all these steps, I got 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.



from Angular 10 - Convert FormArray values to Strings with commas

No comments:

Post a Comment