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

Question

编辑 1：

我修改了我的问题以澄清我的需要。

我有一个FormGroup包含FormControl.

其中FormControl，有一个接收数组值。

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

我得到了什么：（数组值）

我想要什么：（字符串值用逗号分隔，没有brackets[]）

叉子的链接：这里

• 预先感谢您的帮助

原始问题：

我想将从 a 接收到的数据转换为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>

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

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

预先感谢您的解决方案。

编辑 1：

我使用了@akash解决方案的第一个 Option并且它正在工作。我只有一个小问题。当我得到在 上选择的值时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即使您没有输入，也要记住存在。好吧，你需要重写所有的代码来接收一个字符串，比如这个分叉的stackblitz