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

Question

编辑 1：

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

我有一个 FormGroup，其中包含 FormControl。

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

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

我得到的：（数组值）

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

Link 分叉：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 ... 我得到带括号的数组形式 ... 我想要的是带逗号的字符串形式。这是我的问题的 link： https://stackblitz.com/edit/reactive-form-string-values

Answer 1

更新 2:

要从数据库值填充您的表单，只需初始化控件 toppings，如下所示（参见 this fork）-

toppingsValue: string = 'Extra cheese, Mushroom';
this.demandeDevis = this.formBuilder.group({
      toppings: [this.toppingsValue.split(',').map(a => a.trim())]
});

更新 1:

我想我误解了你想要实现的目标。请理解 angular FormGroup 的工作原理。 FormGroup 有控制字段，这是您在下面作为对象传递的内容。此对象是一个 key-value，其中键是您的控件名称（toppings），值是您的控件（例如 FormControl、FormArray 或 FormGroup）-

this.demandeDevis = this.formBuilder.group({
      toppings: this.toppings 
});

因此，当您执行 this.demandeDevis.value 时，您会在相应的控件中获得具有相同键（浇头）和值的对象。您可以使用以下代码获取 toppings 的逗号分隔值。不确定这是否是您要查找的内容，因为这很明显（参见 this fork）-

validateForm(){
    const toppingsValue = this.demandeDevis.controls['toppings'].value;
    console.log(toppingsValue.toString()); 
}

原回答:

如果您对 UI 的外观持开放态度，请使用 angular material

选项 1:

使用mat-select组件。在下面的示例中，您不需要处理 selection/deselection 个选项。请参阅 this example on StackBlitz -

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<div>
{{toppings.value}}
</div>

选项 2:

如果您不想使用下拉菜单，请使用 mat-selection-list，请参阅 this example。下面的示例使用对 mat-selection-list 的引用来获取组件中选定选项的列表 -

<mat-selection-list #shoes (selectionChange)=selectionChange()>
  <mat-list-option [value]="shoe" *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>
{{selectedValuesG}}

Answer 2

我的解决方案是使用 Observable 并在需要时转换数据。

// We define an Observable list of toppings
allToppings$: Observable<string[]> = of (['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']);

// We define our FormGroup
demandeDevis: FormGroup = this.formBuilder.group({
  toppings: [[]]
});

// Lets assume an initial topping in the form of string. Since MatSelect returns array, we will convert this to array and assign it to toppings selected
initialToppings$: Observable<string> = of('Onion, Pepperoni, Tomato'); 
initialToppingListArray$: Observable<string[]> = this.initialToppings$.pipe(
  map(toppingList => toppingList.split(',')),
  tap(toppings => this.toppings.patchValue(toppings))
);

// Next we define toppings and toppingsValue to extract toppings and toppings as a string from the form group
get toppings(): FormControl {
  return this.demandeDevis.get('toppings') as FormControl
};

get toppingsValue(): string {
  return this.toppings.value.join(',')
}

// Finally I will combine allToppings$ and initialToppingListArray$ to use one async pipe in the HTML
v$ = forkJoin([this.allToppings$, this.initialToppingListArray$]).pipe(
  map(([allToppings]) => ({ allToppings}))
)

在HTML

<form [formGroup]="demandeDevis" *ngIf='v$ | async as v'>
<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select formControlName="toppings" multiple>
    <mat-option *ngFor="let topping of v.allToppings" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

<button (click)="validateForm()" >
  Validate (console.log) 
  </button>
</form>


TOPPINGS VALUE: {{ toppingsValue }}

现在您可以使用 toppingsValue

分隔的字符串形式访问列表

See Sample on Stackblit

Answer 3

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

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

Answer 4

你可以这样做here

 ngOnInit() {
  this.initDemandeDevis();
  this.toppings.valueChanges.subscribe(value => {
    this.demandeDevis.patchValue({
      toppingsToString: value.length > 0 ? value.join(",") : ""
    });
  });
 }

 initDemandeDevis() {
   this.demandeDevis = this.formBuilder.group({
     toppingsToString: "",
     accessoires: null
   });
 }

您必须将其重新拆分以填充浇头数组，但我不确定您是否需要它。

Answer 5

您将需要创建自定义控件

See Working Solution

app-string-select.ts

import { Component, forwardRef, OnInit } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Observable, of } from "rxjs";

@Component({
  selector: "app-string-select",
  templateUrl: "./string-select.component.html",
  styleUrls: ["./string-select.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StringSelectComponent),
      multi: true
    }
  ]
})
export class StringSelectComponent implements ControlValueAccessor {
  value: string[] = [];
  allToppings$: Observable<string[]> = of([
    "Extra cheese",
    "Mushroom",
    "Onion",
    "Pepperoni",
    "Sausage",
    "Tomato"
  ]);
  onChange: any = () => {};
  onTouched: any = () => {};
  constructor() {}
  writeValue(value: string): void {
    this.value = value.split(",");
  }
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
  emitChange() {
    this.onChange(this.value.join(","));
  }
}

app-string-select.html

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [(ngModel)]="value" (ngModelChange)='emitChange()' multiple>
    <mat-option *ngFor="let topping of allToppings$ | async" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

select-multiple-example.ts

import {ChangeDetectionStrategy, Component} from '@angular/core';
import {FormControl, FormGroup, FormBuilder} from '@angular/forms';
import {Observable, of } from 'rxjs';
import {tap } from 'rxjs/operators';

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectMultipleExample {

  demandeDevis: FormGroup = this.formBuilder.group({ toppings: ['']});

  initialToppings$: Observable<string> = of('Onion,Pepperoni,Tomato').pipe(
    tap(toppings => this.toppings.patchValue(toppings))
  )

  get toppings(): FormControl {
    return this.demandeDevis.get('toppings') as FormControl
  };

  constructor(private formBuilder: FormBuilder) {}

  validateForm(){
    const valuesForm = this.toppings.value;
    console.log(valuesForm); 
  }
}

select-multiple-example.html

<form [formGroup]="demandeDevis" *ngIf="initialToppings$ | async">
<app-string-select formControlName='toppings'></app-string-select>

<div>
   <button (click)="validateForm()" >
    Validate
  </button>
</div>
</form>

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

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

angular

angular-reactive-forms

formarray

编辑 1：

我得到的：（数组值）

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

原题：

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

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

angular

angular-reactive-forms

formarray

编辑 1：

我得到的：（数组值）

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

原题：

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