如何处理带有角反应形式的多个复选框 [英] How to handle multiple checkboxes with angular reactive forms

问题描述

我有与来自API调用的汽车有关的数据，该数据显示在有角度的ag-grid中.我有一些默认值和一些自定义选项，用户可以选择自己的选择.我还需要为用户提供一个选择定制选项的选项.如果用户单击ag-dialog，则将在ag-grid中为用户提供一个编辑选项，该对话框将打开带有所有自定义选项的复选框，用户可以通过单击复选框来选择该选项.如果用户下次尝试编辑自定义选项，则应选中先前选择的选项复选框，以便用户可以知道他已经选择了哪些选项.

I am having data related to cars coming from an API call which I am displaying in angular ag-grid. I have some default and some customized options which user can select of his own choice. I also need to provide user an option to select the customized option. I am giving user an edit option inside the ag-grid if he clicks on edit one mat-dialog will open up with all customized options with checkbox user can select the option by clicking on the checkbox. if user next time try to edit the customized option the previously selected option checkbox should be checked so that user can know what options he has already selected.

在将已选择的选项显示为选中状态时，我遇到了问题，任何人都可以告诉我如何实现此目标.我已经在此链接下复制了相同的场景

I am facing issue in showing the already selected option as checked, Could anyone please tell me how can I achieve this. I have replicated the same scenario under this link

https://stackblitz.com/edit/ag-grid-with-edit-funcion?file=src%2Fapp%2Fapp.component.ts

如果用户选择编辑第一行的引擎和座套复选框，则我将使用下面的数据显示在ag-grid行中.

I am using below data to display in ag-grid row if a user selects edit of first row the engine and seat-covers checkbox should be automatically selected .

{
  no: 1,
  make: "Toyota",
  model: "Celica",
  price: 35000,
  fields: ["engine", "seat-covers"]
},
{
  no: 2,
  make: "Ford",
  model: "Mondeo",
  price: 32000,
  fields: ["engine", "body-material", "seat-covers"]
},
{
  no: 3,
  make: "Porsche",
  model: "Boxter",
  price: 72000,
  fields: ["engine", "body-material", "seat-covers"]
}

您需要的

推荐答案

，当创建formArray时，请使用 this.data.selectedRow.fields

you need, when create the formArray use the value of this.data.selectedRow.fields

  buildTaskFields() {
    const arr = this.allColumns.map(element => {
      return this.fb.control(this.data.selectedRow.fields.indexOf(element)>=0);
    });
    return this.fb.array(arr);
  }

请参见formArray获取值，例如[true，false，false，true]

See that the formArray gets the values, e.g. [true,false,false,true]

在SubmitButton中，我们使用formArray的值形成一个数组

In submitButton we form an array using the value of the formArray

  onSave() {
    const value=this.businessConfigForm.value.taskFieldsArray
    this.data.selectedRow.fields=this.allColumns.filter((x,index)=>value[index])
    this.dialogRef.close(null);
  }

看到，当我们将行的对象本身作为数据传递时，我们可以在对话框组件中进行更改，而无需管理更改事件".支票

See that, as we pass as data the object itself of the row, we can change in the dialog component and that we needn't mannage "change event" of the checks

您的分叉的堆叠闪电战

注意:您可以在

NOTE: you can see another aproach to mannage a list of checkbox in this SO, in this case you needn't create a formArray, just use a variable array=[...this.data.selectedRow.fields] (you need make a copy)

更新，如果我们要添加新功能，

Update if we want to add a new feature,

首先是 allColumns 属于主要组成部分，因此我们需要在数据中传递此数组，以便进行编辑

The first is that allColumns belong to the main component, so we need pass this array in data, so to edit

 this.dialog.open(AddConfigComponent, {
        const selectedRow = evt.data;
        data: {
          data: selectedRow,
          features:allColumns
        }

在构造函数中

   if (data) {
      this.data = data.data;
      this.allColumns=data.features;
    }

好吧，现在再次添加新的特征，因为我们传递了数组本身，我们可以在save中使用

Well, now to add a new characteristic again, as we pass the array itself, we can use in save

   this.data.push("another characteristic")
   this.dialogRef.close(null);

Updae 2 如果我们的特征是对象类型 {name:...} ，不仅是字符串，还需要更改一些save和buildEditTaskFields

Updae 2 if ours characteristics are object type {name:...} and not only string, we need change a few the save and the buildEditTaskFields

  buildEditTaskFields() {
    const arr = this.allColumns.map(element => {
      //value becomes true if exist and object with name equal to the element
      //see how we use find
      const value=this.data.fields.find(f=>f.name==element)!=null;

      return this.fb.control(value);
    });
    return this.fb.array(arr);
  }

在保存中，在过滤完数组AllColumns之后，我们将映射"到字符串数组到对象数组，如

In save, after filter the array AllColumns, we "map" the array of string to an array of object, some like

  onSave() {
    const value = this.businessConfigForm.value.taskFieldsArray;
    //the filter makes, e.g. the result is ["engine", "body-material"]
    this.data.fields = this.allColumns.filter(
      (x, index) => value[index]
      //the map becomes to [{name:"engine"},{name:"body-material"}]
    ).map(x=>({name:x}));
    this.dialogRef.close(null);
  }

这篇关于如何处理带有角反应形式的多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！