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

编辑1：

我修改我的问题以澄清我的需求。

我有一个FormGroup包含FormControl。

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

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

我得到的是：（数组值）

我想要的是：（用逗号分隔的字符串值不带brackets[]）

叉子的链接：这里

• 预先感谢您的帮助

原始问题：

我想FormArray用逗号将从a接收的数据转换为Strings。

我设法在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解决方案的第一个选项，它正在工作。我有一点问题。当我获得在上选择的值时input，我想将其发送到formControl...。我得到带括号的数组形式...我想要的是带逗号的字符串形式。这是我的问题的链接：https : //stackblitz.com/edit/reactive-form-string-values