Question

给定绑定到同一formControlName的复选框列表，如何生成绑定到formControl的复选框值数组，而不仅仅是true / false ？

示例：

<form [formGroup]="checkboxGroup">
    <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" />
    <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" />
    <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" />
</form>

checkboxGroup.controls['myValues'].value目前产生：

true or false

我希望它产生什么：

['value-1', 'value-2', ...]

Answer 1

这是使用FormArray https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html

的好地方

首先，我们使用FormBuilder或新增FormArray

来构建我们的控件数组

<强> FormBuilder

this.checkboxGroup = _fb.group({
  myValues: _fb.array([true, false, true])
});

新FormArray

let checkboxArray = new FormArray([
  new FormControl(true),
  new FormControl(false),
  new FormControl(true)]);

this.checkboxGroup = _fb.group({
  myValues: checkboxArray
});

很容易做到，但随后我们将改变我们的模板并让模板引擎处理我们绑定到控件的方式：

<强> template.html

<form [formGroup]="checkboxGroup">
    <input *ngFor="let control of checkboxGroup.controls['myValues'].controls"
    type="checkbox" id="checkbox-1" value="value-1" [formControl]="control" />     
  </form>

我们在FormControls myValues中对我们的FormArray集进行迭代，对于每个控件，我们将[formControl]绑定到该控件上对FormArray控件和<div>{{checkboxGroup.controls['myValues'].value}}</div>生成true,false,true，同时也使您的模板语法少一些手动。

您可以使用此示例：http://plnkr.co/edit/a9OdMAq2YIwQFo7gixbj?p=preview来探讨

Answer 2

在silentsod回答的帮助下，我写了一个解决方案，在我的formBuilder中获取值而不是状态。

我使用一种方法在formArray中添加或删除值。这可能是一个糟糕的approch，但它确实有效！

component.html

<div *ngFor="let choice of checks; let i=index" class="col-md-2">
  <label>
    <input type="checkbox" [value]="choice.value" (change)="onCheckChange($event)">
    {{choice.description}}
  </label>
</div>

<强> component.ts

// For example, an array of choices
public checks: Array<ChoiceClass> = [
  {description: 'descr1', value: 'value1'},
  {description: "descr2", value: 'value2'},
  {description: "descr3", value: 'value3'}
];

initModelForm(): FormGroup{
  return this._fb.group({
    otherControls: [''],
    // The formArray, empty 
    myChoices: new FormArray([]),
  }
}

onCheckChange(event) {
  const formArray: FormArray = this.myForm.get('myChoices') as FormArray;

  /* Selected */
  if(event.target.checked){
    // Add a new control in the arrayForm
    formArray.push(new FormControl(event.target.value));
  }
  /* unselected */
  else{
    // find the unselected element
    let i: number = 0;

    formArray.controls.forEach((ctrl: FormControl) => {
      if(ctrl.value == event.target.value) {
        // Remove the unselected element from the arrayForm
        formArray.removeAt(i);
        return;
      }

      i++;
    });
  }
}

当我提交表单时，例如我的模型如下：

  otherControls : "foo",
  myChoices : ['value1', 'value2']

只缺少一件事，如果你的模型已经检查了值，则填充formArray的函数。

Answer 3

如果您要查找JSON格式的复选框值

{ "name": "", "countries": [ { "US": true }, { "Germany": true }, { "France": true } ] }

Full example here

我很抱歉使用国家/地区名称作为复选框值而不是问题中的值。进一步解释 -

为表单

创建FormGroup

 createForm() {

    //Form Group for a Hero Form
    this.heroForm = this.fb.group({
      name: '',
      countries: this.fb.array([])
    });

    let countries=['US','Germany','France'];

    this.setCountries(countries);}
 }

让每个复选框都是一个FormGroup，它是一个对象，它的唯一属性是复选框的值。

 setCountries(countries:string[]) {

    //One Form Group for one country
    const countriesFGs = countries.map(country =>{
            let obj={};obj[country]=true;
            return this.fb.group(obj)
    });

    const countryFormArray = this.fb.array(countriesFGs);
    this.heroForm.setControl('countries', countryFormArray);
  }

复选框的FormGroups数组用于设置＆＃39;国家/地区的控制权。在父表格中。

  get countries(): FormArray {
      return this.heroForm.get('countries') as FormArray;
  };

在模板中，使用管道获取复选框控件的名称

  <div formArrayName="countries" class="well well-lg">
      <div *ngFor="let country of countries.controls; let i=index" [formGroupName]="i" >
          <div *ngFor="let key of country.controls | mapToKeys" >
              <input type="checkbox" formControlName="{{key.key}}">{{key.key}}
          </div>
      </div>
  </div>

Answer 4

即使从API异步填充了复选框信息，在Angular 6中执行此操作也比以前的版本中要容易得多。

首先要意识到的是，由于Angular 6的keyvalue管道，我们不再需要使用FormArray，而可以嵌套FormGroup。

首先，将FormBuilder传递给构造函数

constructor(
    private _formBuilder: FormBuilder,
) { }

然后初始化我们的表格。

ngOnInit() {

    this.form = this._formBuilder.group({
        'checkboxes': this._formBuilder.group({}),
    });

}

当我们的复选框选项数据可用时，对其进行迭代，然后可以将其作为命名的FormGroup直接推入嵌套的FormControl，而不必依赖于数字索引的查找数组。

options.forEach((option: any) => {
    const checkboxes = <FormGroup>this.form.get('checkboxes');
    checkboxes.addControl(option.title, new FormControl(true));
});

最后，在模板中，我们只需要迭代复选框的keyvalue：无需额外的let index = i，复选框将自动按字母顺序排列：更加整洁。

<form [formGroup]="form">

    <h3>Options</h3>

    <div formGroupName="checkboxes">

        <ul>
            <li *ngFor="let item of form.get('checkboxes').value | keyvalue">
                <label>
                    <input type="checkbox" [formControlName]="item.key" [value]="item.value" /> {{ item.key }}
                </label>
            </li>
        </ul>

    </div>

</form>

Answer 5

点击一个事件，然后手动将true的值更改为复选框所代表的名称，然后名称或true将评估相同的值，您可以获取所有值而不是真/假的清单。例如：

component.html

<form [formGroup]="customForm" (ngSubmit)="onSubmit()">
    <div class="form-group" *ngFor="let parameter of parameters"> <!--I iterate here to list all my checkboxes -->
        <label class="control-label" for="{{parameter.Title}}"> {{parameter.Title}} </label>
            <div class="checkbox">
              <input
                  type="checkbox"
                  id="{{parameter.Title}}"
                  formControlName="{{parameter.Title}}"
                  (change)="onCheckboxChange($event)"
                  > <!-- ^^THIS^^ is the important part -->
             </div>
      </div>
 </form>

component.ts

onCheckboxChange(event) {
    //We want to get back what the name of the checkbox represents, so I'm intercepting the event and
    //manually changing the value from true to the name of what is being checked.

    //check if the value is true first, if it is then change it to the name of the value
    //this way when it's set to false it will skip over this and make it false, thus unchecking
    //the box
    if(this.customForm.get(event.target.id).value) {
        this.customForm.patchValue({[event.target.id] : event.target.id}); //make sure to have the square brackets
    }
}

这会在事件被Angular Forms更改为true或false后捕获事件，如果它是真的我将名称更改为复选框所代表的名称，如果需要，它也将评估为true，如果它＆＃39;正在检查是否为真/假。

Answer 6

如果要使用Angular反应形式（https://angular.io/guide/reactive-forms）。

您可以使用一个表单控件来管理复选框组的输出值。

组件

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { flow } from 'lodash';
import { flatMap, filter } from 'lodash/fp';

@Component({
  selector: 'multi-checkbox',
  templateUrl: './multi-checkbox.layout.html',
})
export class MultiChecboxComponent  {

  checklistState = [ 
      {
        label: 'Frodo Baggins',
        value: 'frodo_baggins',
        checked: false
      },
      {
        label: 'Samwise Gamgee',
        value: 'samwise_gamgee',
        checked: true,
      },
      {
        label: 'Merry Brandybuck',
        value: 'merry_brandybuck',
        checked: false
      }
    ];

  form = new FormGroup({
    checklist : new FormControl(this.flattenValues(this.checklistState)),
  });


  checklist = this.form.get('checklist');

  onChecklistChange(checked, checkbox) {
    checkbox.checked = checked;
    this.checklist.setValue(this.flattenValues(this.checklistState));
  }

  flattenValues(checkboxes) {
    const flattenedValues = flow([
      filter(checkbox => checkbox.checked),
      flatMap(checkbox => checkbox.value )
    ])(checkboxes)
    return flattenedValues.join(',');
  }
}

html

<form [formGroup]="form">
    <label *ngFor="let checkbox of checklistState" class="checkbox-control">
    <input type="checkbox" (change)="onChecklistChange($event.target.checked, checkbox)" [checked]="checkbox.checked" [value]="checkbox.value" /> {{ checkbox.label }}
  </label>
</form>

`checklistState`

管理清单输入的模型/状态。此模型使您可以将当前状态映射到所需的任何值格式。

型号：

{
   label: 'Value 1',
   value: 'value_1',
   checked: false
},
{
  label: 'Samwise Gamgee',
  value: 'samwise_gamgee',
  checked: true,
},
{
  label: 'Merry Brandybuck',
  value: 'merry_brandybuck',
  checked: false
}

`checklist`表单控制

此控件存储要保存为例如的值

值输出："value_1,value_2"

请参见https://stackblitz.com/edit/angular-multi-checklist上的演示

Answer 7

TL; DR

我更喜欢使用FormGroup填充复选框列表
写一个自定义验证器以选中至少一个复选框
工作示例https://stackblitz.com/edit/angular-validate-at-least-one-checkbox-was-selected

这有时也让我感到震惊，所以我确实尝试了FormArray和FormGroup方法。

大多数情况下，复选框列表填充在服务器上，而我是通过API收到的。但是有时您会看到一组带有预定义值的静态复选框。对于每个用例，将使用相应的FormArray或FormGroup。

基本上FormArray是FormGroup的变体。关键区别在于其数据被序列化为一个数组（与之相对的是在FormGroup中被序列化为一个对象）。当您不知道组中将存在多少控件（例如动态表单）时，这可能特别有用。

为简单起见，假设您有一个使用

的简单创建产品表单

一个必需的产品名称文本框。
要选择的类别列表，要求至少要检查一个类别。假设将从服务器中检索列表。

首先，我建立了一个仅具有产品名称formControl的表单。这是必填字段。

this.form = this.formBuilder.group({
    name: ["", Validators.required]
});

由于类别是动态呈现的，因此在数据准备好以后，我将不得不将这些数据添加到表单中。

this.getCategories().subscribe(categories => {
    this.form.addControl("categoriesFormArr", this.buildCategoryFormArr(categories));
    this.form.addControl("categoriesFormGroup", this.buildCategoryFormGroup(categories));
})

有两种方法来建立类别列表。

1。表单数组

buildCategoryFormGroup(categories: ProductCategory[], selectedCategoryIds: string[] = []): FormGroup {
  let group = this.formBuilder.group({}, {
    validators: atLeastOneCheckboxCheckedValidator()
  });
  categories.forEach(category => {
    let isSelected = selectedCategoryIds.some(id => id === category.id);
    group.addControl(category.id, this.formBuilder.control(isSelected));
  })
  return group;
}

<div *ngFor="let control of categoriesFormArr?.controls; let i = index" class="checkbox">
  <label><input type="checkbox" [formControl]="control" />
    {{ categories[i]?.title }}
  </label>
</div>

此buildCategoryFormGroup将为我返回一个FormArray。它还将所选值的列表作为参数，因此，如果您想将表单重用于编辑数据，这可能会有所帮助。为了创建新产品表格，该表格尚不适用。

请注意，当您尝试访问formArray值时。看起来像[false, true, true]。要获取选定ID的列表，需要更多的工作来从列表中进行检查，但要基于数组索引。对我来说听起来不太好，但是可以。

get categoriesFormArraySelectedIds(): string[] {
  return this.categories
  .filter((cat, catIdx) => this.categoriesFormArr.controls.some((control, controlIdx) => catIdx === controlIdx && control.value))
  .map(cat => cat.id);
}

这就是为什么我为此使用FormGroup

2。表格组

formGroup的不同之处在于它将表单数据存储为对象，这需要一个键和一个表单控件。因此，最好将密钥设置为categoryId，然后稍后再检索。

buildCategoryFormGroup(categories: ProductCategory[], selectedCategoryIds: string[] = []): FormGroup {
  let group = this.formBuilder.group({}, {
    validators: atLeastOneCheckboxCheckedValidator()
  });
  categories.forEach(category => {
    let isSelected = selectedCategoryIds.some(id => id === category.id);
    group.addControl(category.id, this.formBuilder.control(isSelected));
  })
  return group;
}

<div *ngFor="let item of categories; let i = index" class="checkbox">
  <label><input type="checkbox" [formControl]="categoriesFormGroup?.controls[item.id]" /> {{ categories[i]?.title }}
  </label>
</div>

表单组的值将如下所示：

{
    "category1": false,
    "category2": true,
    "category3": true,
}

但是最常见的是，我们只想获取categoryId列表作为["category2", "category3"]。我还必须编写一个获取这些数据的命令。与formArray相比，我更喜欢这种方法，因为我实际上可以从表单本身获取值。

get categoriesFormArraySelectedIds(): string[] {
  return this.categories
    .filter((cat, catIdx) => this.categoriesFormArr.controls.some((control, controlIdx) => catIdx === controlIdx && control.value))
    .map(cat => cat.id);
}

3。自定义验证器选中了至少一个复选框

我让验证程序检查至少选中了X复选框，默认情况下，它将仅对一个复选框进行检查。

export function atLeastOneCheckboxCheckedValidator(minRequired = 1): ValidatorFn {
  return function validate(formGroup: FormGroup) {
    let checked = 0;

    Object.keys(formGroup.controls).forEach(key => {
      const control = formGroup.controls[key];

      if (control.value === true) {
        checked++;
      }
    });

    if (checked < minRequired) {
      return {
        requireCheckboxToBeChecked: true,
      };
    }

    return null;
  };
}

Answer 8

我在这里看不到一个能够最大程度地使用反应形式完全回答问题的解决方案，因此这也是我的解决方案。

摘要

这是详细解释的精髓所在，还有StackBlitz示例。

使用FormArray作为复选框并初始化表单。
valueChanges的可观察性非常适合您希望表单显示某些内容但将其他内容存储在组件中的情况。在此处将true / false值映射到所需的值。
提交时过滤掉false值。
可观察到的valueChanges退订。

StackBlitz example

详细说明

使用FormArray定义表单

如答案中已提到的标记为正确。在需要将数据存储在数组中的情况下，可以使用FormArray。因此，您需要做的第一件事就是创建表单。

checkboxGroup: FormGroup;
checkboxes = [{
    name: 'Value 1',
    value: 'value-1'
}, {
    name: 'Value 2',
    value: 'value-2'
}];

this.checkboxGroup = this.fb.group({
    checkboxes: this.fb.array(this.checkboxes.map(x => false))
});

这只会将所有复选框的初始值设置为false。

接下来，我们需要在模板中注册这些表单变量，并在checkboxes数组上进行迭代（不是FormArray，而是复选框数据）以在模板中显示它们。

<form [formGroup]="checkboxGroup">
    <ng-container *ngFor="let checkbox of checkboxes; let i = index" formArrayName="checkboxes">
        <input type="checkbox" [formControlName]="i" />{{checkbox.name}}
    </ng-container>
</form>

使用可观察到的valueChanges

这是在此处给出的任何答案中未提及的部分。在这种情况下，我们希望显示所述数据但将其存储为其他数据，可观察的valueChanges非常有用。使用valueChanges，我们可以观察到checkboxes和map从true接收到的false / FormArray值到期望值的变化。数据。请注意，这不会更改复选框的选择，因为传递给复选框的任何truthy值都会将其标记为已选中，反之亦然。

subscription: Subscription;

const checkboxControl = (this.checkboxGroup.controls.checkboxes as FormArray);
this.subscription = checkboxControl.valueChanges.subscribe(checkbox => {
    checkboxControl.setValue(
        checkboxControl.value.map((value, i) => value ? this.checkboxes[i].value : false),
        { emitEvent: false }
    );
});

这基本上将FormArray值映射到原始checkboxes数组，并在复选框标记为value的情况下返回true，否则返回{{1} }。 false在这里很重要，因为设置emitEvent: false的值不设置将导致FormArray发出一个创建无限循环的事件。通过将valueChanges设置为emitEvent，我们可以确保在此处设置值时不会发出false的可观察对象。

过滤掉错误值

我们无法直接过滤valueChanges中的false值，因为这样做会混淆模板，因为它们已绑定到复选框。因此，最好的解决方案是在提交过程中过滤掉FormArray值。使用价差运算符执行此操作。

false

这基本上从submit() { const checkboxControl = (this.checkboxGroup.controls.checkboxes as FormArray); const formValue = { ...this.checkboxGroup.value, checkboxes: checkboxControl.value.filter(value => !!value) } // Submit formValue here instead of this.checkboxGroup.value as it contains the filtered data }中过滤出falsy值。

退订valueChanges

最后，别忘了退订checkboxes

valueChanges

注意：在特殊情况下，无法在ngOnDestroy() { this.subscription.unsubscribe(); }中将值设置为FormArray，即，如果复选框值设置为数字{{1 }}。这将使它看起来像无法选中该复选框，因为选中该复选框会将valueChanges设置为数字0（一个伪造的值），从而使其保持未选中状态。最好不要使用数字FormControl作为值，但是如果需要，则必须有条件地将0设置为某个真实值，例如字符串0或仅使用普通{{ 1}}，然后在提交时，将其转换回数字0。

StackBlitz example

StackBlitz还具有用于将默认值传递给复选框的代码，以便将默认值在UI中标记为已选中。

Answer 9

模板部分： -

    <div class="form-group">
         <label for="options">Options:</label>
         <div *ngFor="let option of options">
            <label>
                <input type="checkbox"
                   name="options"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"
                                />
                  {{option.name}}
                  </label>
              </div>
              <br/>
         <button (click)="getselectedOptions()"  >Get Selected Items</button>
     </div>

控制器部分： -

        export class Angular2NgFor {

          constructor() {
             this.options = [
              {name:'OptionA', value:'first_opt', checked:true},
              {name:'OptionB', value:'second_opt', checked:false},
              {name:'OptionC', value:'third_opt', checked:true}
             ];


             this.getselectedOptions = function() {
               alert(this.options
                  .filter(opt => opt.checked)
                  .map(opt => opt.value));
                }
             }

        }

Answer 10

加我5美分）我的问题模型

search.exclude

template.html

{
   name: "what_is_it",
   options:[
     {
      label: 'Option name',
      value: '1'
     },
     {
      label: 'Option name 2',
      value: '2'
     }
   ]
}

component.ts

<div class="question"  formGroupName="{{ question.name }}">
<div *ngFor="let opt of question.options; index as i" class="question__answer" >
  <input 
    type="checkbox" id="{{question.name}}_{{i}}"
    [name]="question.name" class="hidden question__input" 
    [value]="opt.value" 
    [formControlName]="opt.label"
   >
  <label for="{{question.name}}_{{i}}" class="question__label question__label_checkbox">
      {{opt.label}}
  </label>
</div>

Answer 11

我的解决方案 - 使用Material View解决了Angular 5的问题连接是通过

formArrayName =＆＃34;通知＆＃34;

（更改）=＆＃34; updateChkbxArray（n.id，$ event.checked，＆＃39;通知＆＃39;）＆＃34;

这样它可以在一个表单中用于多个复选框数组。只需设置每次连接的控件数组的名称。

＆＃13;

constructor(
  private fb: FormBuilder,
  private http: Http,
  private codeTableService: CodeTablesService) {

  this.codeTableService.getnotifications().subscribe(response => {
      this.notifications = response;
    })
    ...
}


createForm() {
  this.form = this.fb.group({
    notification: this.fb.array([])...
  });
}

ngOnInit() {
  this.createForm();
}

updateChkbxArray(id, isChecked, key) {
  const chkArray = < FormArray > this.form.get(key);
  if (isChecked) {
    chkArray.push(new FormControl(id));
  } else {
    let idx = chkArray.controls.findIndex(x => x.value == id);
    chkArray.removeAt(idx);
  }
}

＆＃13;

<div class="col-md-12">
  <section class="checkbox-section text-center" *ngIf="notifications  && notifications.length > 0">
    <label class="example-margin">Notifications to send:</label>
    <p *ngFor="let n of notifications; let i = index" formArrayName="notification">
      <mat-checkbox class="checkbox-margin" (change)="updateChkbxArray(n.id, $event.checked, 'notification')" value="n.id">{{n.description}}</mat-checkbox>
    </p>
  </section>
</div>

＆＃13;

最后，您将保存包含原始记录ID数组的表单以进行保存/更新。

很高兴有任何改进的评论。

Answer 12

@ nash11的相关答案，这是生成复选框值数组的方式

AND

具有一个复选框，该复选框也选择了所有复选框：

https://stackblitz.com/edit/angular-checkbox-custom-value-with-selectall

Answer 13

我能够使用 FormGroup 的 FormArray 来完成此操作。 FormGroup 由两个控件组成。一个用于数据，一个用于存储检查的布尔值。

TS

options: options[] = [{id: 1, text: option1}, {id: 2, text: option2}];

this.fb.group({
  options: this.fb.array([])
})    

populateFormArray() {    
  this.options.forEach(option => {                       
    let checked = ***is checked logic here***;            
    this.checkboxGroup.get('options').push(this.createOptionGroup(option, checked))
  });       
}  

createOptionGroup(option: Option, checked: boolean) {
  return this.fb.group({      
    option: this.fb.control(option),
    checked: this.fb.control(checked)
  });
}

HTML

这允许您遍历选项并绑定到相应的选中控件。

<form [formGroup]="checkboxGroup">
  <div formArrayName="options" *ngFor="let option of options; index as i">   
    <div [formGroupName]="i">
      <input type="checkbox" formControlName="checked" />
      {{ option.text }}
    </div>
  </div>       
</form>

输出

表单以 {option: Option, checked: boolean}[] 的形式返回数据。

您可以使用以下代码获取已选中选项的列表

 this.checkboxGroup.get('options').value.filter(el => el.checked).map(el => el.option);

Angular ReactiveForms：生成一个复选框值数组？

13 个答案:

`checklistState`

`checklist`表单控制

1。表单数组

2。表格组

3。自定义验证器选中了至少一个复选框

摘要

StackBlitz example

详细说明

StackBlitz example

Angular ReactiveForms：生成一个复选框值数组？

13 个答案:

checklistState

checklist表单控制

1。表单数组

2。表格组

3。自定义验证器选中了至少一个复选框

摘要

StackBlitz example

详细说明

StackBlitz example

`checklistState`

`checklist`表单控制