Angular 10 - 将 FormControl 数组值转换为以逗号分隔的字符串

Question

编辑 1:

我修改我的问题以阐明我的需要。

我有一个包含 FormControl 的 FormGroup。

在这些 FormControl 中，有一个接收数组值。

我正在寻找的是是否有一种解决方案可以使 FormControl 接收数组值而不是接收逗号分隔字符串值中的值(没有方括号 [])。

我得到的:(数组值)

我想要的:(字符串值用逗号分隔，没有 brackets[] )

fork 链接:Here

• 预先感谢您的帮助

原始问题:

我想将从 FormArray 接收到的数据转换为带逗号的字符串。

我设法在 Console.log 中做到了这一点，但我不知道如何将转换后的数据发送到 FormGroup。

我的 TS 文件:

  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++;
      });
    }
  }

我的 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>

当我按照这些步骤操作时，我在“Accessoire”上得到了 null，在“Accessoires”上得到了数组值。

我正在寻找的是从复选框列表中选择的值，并将它们转换为带逗号的字符串。我不想以数组形式发送它们。

提前感谢您的解决方案。

编辑 1:

我使用了 @akash 解决方案的第一个选项，它正在运行。我有一个小问题。当我获得在 input 上选择的值时，我想将它发送到 formControl ...我得到带括号的数组形式...我想要的是带逗号的字符串形式。这是我的问题的链接: 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>

请记住，即使您没有输入，FormControl 也存在。好吧，你需要重写你所有的代码来接收一个字符串，比如 this forked stackblitz