Angular ReactiveForms Producing an array of checkbox values

Question

Given a list of checkboxes bound to the same formControlName  how can I produce an array of checkbox values bound to the formControl  rather than simply true false   Example    lt form  formGroup   checkboxGroup  gt       lt input type  checkbox  id  checkbox-1  value  value-1  formControlName  myValues    gt       lt input type  checkbox  id  checkbox-2  value  value-2  formControlName  myValues    gt       lt input type  checkbox  id  checkbox-3  value  value-2  formControlName  myValues    gt   lt  form gt    checkboxGroup controls  myValues   value currently produces   true or false   What I want it to produce     value-1    value-2

User · Answer

I was able to accomplish this using a FormArray of FormGroups. The FormGroup consists of two controls. One for the data and one to store the checked boolean.

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

This allows you to loop through the options and bind to the corresponding checked control.

<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>

Output

The form returns data in the form {option: Option, checked: boolean}[].

You can get a list of checked options using the below code

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

User · Answer

Related answer to  nash11  here s how you would produce an array of checkbox values AND have a checkbox that also selectsAll the checkboxes  https   stackblitz com edit angular-checkbox-custom-value-with-selectall

User · Answer

With the help of silentsod answer  I wrote a solution to get values instead of states in my formBuilder     I use a method to add or remove values in the formArray  It may be a bad approch  but it works    component html     lt div  ngFor  let choice of checks  let i index  class  col-md-2  gt     lt label gt       lt input type  checkbox   value   choice value   change   onCheckChange  event   gt        choice description      lt  label gt   lt  div gt    component ts     For example  an array of choices public checks  Array lt ChoiceClass gt         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    gt          if ctrl value    event target value               Remove the unselected element from the arrayForm         formArray removeAt i           return                 i                    When I submit my form  for example my model looks like     otherControls    foo     myChoices     value1    value2     Only one thing is missing  a function to fill the formArray if your model already has checked values

User · Answer

My solution - solved it for Angular 5 with Material View The connection is through the      formArrayName  notification        change   updateChkbxArray n id   event checked   notification      This way it can work for multiple checkboxes arrays in one form  Just set the name of the controls array to connect each time    x000D   x000D  constructor  x000D    private fb  FormBuilder  x000D    private http  Http  x000D    private codeTableService  CodeTablesService    x000D   x000D    this codeTableService getnotifications   subscribe response   gt    x000D        this notifications   response  x000D         x000D          x000D    x000D   x000D   x000D  createForm     x000D    this form   this fb group   x000D      notification  this fb array        x000D        x000D    x000D   x000D  ngOnInit     x000D    this createForm    x000D    x000D   x000D  updateChkbxArray id  isChecked  key    x000D    const chkArray    lt  FormArray  gt  this form get key   x000D    if  isChecked    x000D      chkArray push new FormControl id    x000D      else   x000D      let idx   chkArray controls findIndex x   gt  x value    id   x000D      chkArray removeAt idx   x000D      x000D    x000D   lt div class  col-md-12  gt  x000D     lt section class  checkbox-section text-center   ngIf  notifications   amp  amp  notifications length  gt  0  gt  x000D       lt label class  example-margin  gt Notifications to send  lt  label gt  x000D       lt p  ngFor  let n of notifications  let i   index  formArrayName  notification  gt  x000D         lt mat-checkbox class  checkbox-margin   change   updateChkbxArray n id   event checked   notification    value  n id  gt   n description   lt  mat-checkbox gt  x000D       lt  p gt  x000D     lt  section gt  x000D   lt  div gt  x000D   x000D   x000D    At the end you are getting to save the form with array of original records id s to save update         Will be happy to have any remarks for improvement

User · Answer

Add my 5 cents   My question model        name   what is it      options                label   Option name         value   1                       label   Option name 2         value   2                  template html   lt div class  question   formGroupName     question name     gt   lt div  ngFor  let opt of question options  index as i  class  question  answer   gt     lt input      type  checkbox  id    question name     i         name   question name  class  hidden question  input        value   opt value        formControlName   opt label      gt     lt label for    question name     i    class  question  label question  label checkbox  gt          opt label      lt  label gt   lt  div gt      component ts   onSubmit         let formModel           for  let key in this form value          if  typeof this form value key       object              formModel key    this form value key          else     if formgroup item         formModel key                for  let k in this form value key               if  this form value key  k               formModel key    formModel key    k          create string with     separators like  a b c                               console log formModel

User · Answer

It s significantly easier to do this in Angular 6 than it was in previous versions  even when the checkbox information is populated asynchronously from an API   The first thing to realise is that thanks to Angular 6 s keyvalue pipe we don t need to have to use FormArray anymore  and can instead nest a FormGroup   First  pass FormBuilder into the constructor  constructor      private  formBuilder  FormBuilder          Then initialise our form   ngOnInit          this form   this  formBuilder group            checkboxes   this  formBuilder group                   When our checkbox options data is available  iterate it and we can push it directly into the nested FormGroup as a named FormControl  without having to rely on number indexed lookup arrays   const checkboxes    lt FormGroup gt this form get  checkboxes    options forEach  option  any    gt        checkboxes addControl option title  new FormControl true          Finally  in the template we just need to iterate the keyvalue of the checkboxes  no additional let index   i  and the checkboxes will automatically be in alphabetical order  much cleaner    lt form  formGroup   form  gt        lt h3 gt Options lt  h3 gt        lt div formGroupName  checkboxes  gt            lt ul gt               lt li  ngFor  let item of form get  checkboxes   value   keyvalue  gt                   lt label gt                       lt input type  checkbox   formControlName   item key   value   item value    gt     item key                     lt  label gt               lt  li gt           lt  ul gt        lt  div gt    lt  form gt

User · Answer

Make an event when it s clicked and then manually change the value of true to the name of what the check box represents  then the name or true will evaluate the same and you can get all the values instead of a list of true false  Ex   component html   lt form  formGroup   customForm   ngSubmit   onSubmit    gt       lt div class  form-group   ngFor  let parameter of parameters  gt   lt  --I iterate here to list all my checkboxes -- gt           lt label class  control-label  for    parameter Title    gt    parameter Title    lt  label gt               lt div class  checkbox  gt                 lt input                   type  checkbox                    id    parameter Title                      formControlName    parameter Title                       change   onCheckboxChange  event                      gt   lt  --   THIS   is the important part -- gt                lt  div gt         lt  div gt    lt  form gt    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           This catches the event after it was already changed to true or false by Angular Forms  if it s true I change the name to the name of what the checkbox represents  which if needed will also evaluate to true if it s being checked for true false as well

User · Answer

TL DR   I prefer to use FormGroup to populate the list of checkbox Write a custom validator for check at least one checkbox was selected Working example https   stackblitz com edit angular-validate-at-least-one-checkbox-was-selected     This also struck me for sometimes so I did try both FormArray and FormGroup approaches     Most of the time  the list of checkbox was populated on the server and I received it through API  But sometimes you will have a static set of checkbox with your predefined value  With each use case  the corresponding FormArray or FormGroup will be used       Basically FormArray is a variant of FormGroup  The key difference is that its data gets serialized as an array  as opposed to being serialized as an object in case of FormGroup   This might be especially useful when you don   t know how many controls will be present within the group  like dynamic forms    For the sake of simplicity  imagine you have a simple create product form with    One required product name textbox  A list of category to select from  required at least one to be checked  Assume the list will be retrieved from the server    First  I set up a form with only product name formControl  It is a required field   this form   this formBuilder group       name       Validators required        Since the category is dynamically rendering  I will have to add these data into the form later after the data was ready   this getCategories   subscribe categories   gt        this form addControl  categoriesFormArr   this buildCategoryFormArr categories        this form addControl  categoriesFormGroup   this buildCategoryFormGroup categories         There are two approaches to build up the category list   1  Form Array    buildCategoryFormArr categories  ProductCategory    selectedCategoryIds  string          FormArray       const controlArr   categories map category   gt          let isSelected   selectedCategoryIds some id   gt  id     category id         return this formBuilder control isSelected              return this formBuilder array controlArr  atLeastOneCheckboxCheckedValidator           lt div  ngFor  let control of categoriesFormArr  controls  let i   index  class  checkbox  gt     lt label gt  lt input type  checkbox   formControl   control    gt         categories i   title       lt  label gt   lt  div gt    This buildCategoryFormGroup will return me a FormArray  It also take a list of selected value as an argument so If you want to reuse the form for edit data  it could be helpful  For the purpose of create a new product form  it is not be applicable yet    Noted that when you try to access the formArray values  It will looks like  false  true  true   To get a list of selected id  it required a bit more work to check from the list but based on the array index  Doesn t sound good to me but it works    get categoriesFormArraySelectedIds    string       return this categories    filter  cat  catIdx    gt  this categoriesFormArr controls some  control  controlIdx    gt  catIdx     controlIdx  amp  amp  control value      map cat   gt  cat id       That s why I came up using FormGroup for that matter  2  Form Group  The different of the formGroup is it will store the form data as the object  which required a key and a form control  So it is the good idea to set the key as the categoryId and then we can retrieve it later   buildCategoryFormGroup categories  ProductCategory    selectedCategoryIds  string          FormGroup     let group   this formBuilder group           validators  atLeastOneCheckboxCheckedValidator           categories forEach category   gt        let isSelected   selectedCategoryIds some id   gt  id     category id       group addControl category id  this formBuilder control isSelected           return group       lt div  ngFor  let item of categories  let i   index  class  checkbox  gt     lt label gt  lt input type  checkbox   formControl   categoriesFormGroup  controls item id     gt     categories i   title       lt  label gt   lt  div gt    The value of the form group will look like          category1   false       category2   true       category3   true      But most often we want to get only the list of categoryIds as   category2    category3    I also have to write a get to take these data  I like this approach better comparing to the formArray  because I could actually take the value from the form itself     get categoriesFormGroupSelectedIds    string         let ids  string             for  var key in this categoriesFormGroup controls          if  this categoriesFormGroup controls key  value            ids push key                 else           ids   ids filter id   gt  id     key                     return ids        3  Custom validator to check at least one checkbox was selected  I made the validator to check at least X checkbox was selected  by default it will check against one checkbox only   export function atLeastOneCheckboxCheckedValidator minRequired   1   ValidatorFn     return function validate formGroup  FormGroup        let checked   0       Object keys formGroup controls  forEach key   gt          const control   formGroup controls key          if  control value     true            checked                         if  checked  lt  minRequired          return           requireCheckboxToBeChecked  true                      return null

User · Answer

I don t see a solution here that completely answers the question using reactive forms to its fullest extent so here s my solution for the same     Summary  Here s the pith of the detailed explanation along with a StackBlitz example    Use FormArray for the checkboxes and initialize the form  The valueChanges observable is perfect for when you want the form to display something but store something else in the component  Map the true false values to the desired values here  Filter out the false values at the time of submission  Unsubscribe from valueChanges observable    StackBlitz example    Detailed explanation  Use FormArray to define the form  As already mentioned in the answer marked as correct  FormArray is the way to go in such cases where you would prefer to get the data in an array  So the first thing you need to do is create the form   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   gt  false         This will just set the initial value of all the checkboxes to false   Next  we need to register these form variables in the template and iterate over the checkboxes array  NOT the FormArray but the checkbox data  to display them in the template    lt form  formGroup   checkboxGroup  gt       lt ng-container  ngFor  let checkbox of checkboxes  let i   index  formArrayName  checkboxes  gt           lt input type  checkbox   formControlName   i    gt   checkbox name        lt  ng-container gt   lt  form gt    Make use of the valueChanges observable  Here s the part I don t see mentioned in any answer given here  In situations such as this  where we would like to display said data but store it as something else  the valueChanges observable is very helpful  Using valueChanges  we can observe the changes in the checkboxes and then map the true false values received from the FormArray to the desired data  Note that this will not change the selection of the checkboxes as any truthy value passed to the checkbox will mark it as checked and vice-versa   subscription  Subscription   const checkboxControl    this checkboxGroup controls checkboxes as FormArray   this subscription   checkboxControl valueChanges subscribe checkbox   gt        checkboxControl setValue          checkboxControl value map  value  i    gt  value   this checkboxes i  value   false             emitEvent  false                This basically maps the FormArray values to the original checkboxes array and returns the value in case the checkbox is marked as true  else it returns false  The emitEvent  false is important here since setting the FormArray value without it will cause  valueChanges to emit an event creating an endless loop  By setting emitEvent to false  we are making sure the valueChanges observable does not emit when we set the value here   Filter out the false values  We cannot directly filter the false values in the FormArray because doing so will mess up the template since they are bound to the checkboxes  So the best possible solution is to filter out the false values during submission  Use the spread operator to do this   submit         const checkboxControl    this checkboxGroup controls checkboxes as FormArray       const formValue                this checkboxGroup value          checkboxes  checkboxControl value filter value   gt    value               Submit formValue here instead of this checkboxGroup value as it contains the filtered data     This basically filters out the falsy values from the checkboxes   Unsubscribe from valueChanges  Lastly  don t forget to unsubscribe from valueChanges  ngOnDestroy         this subscription unsubscribe        Note  There is a special case where a value cannot be set to the FormArray in valueChanges  i e if the checkbox value is set to the number 0  This will make it look like the checkbox cannot be selected since selecting the checkbox will set the FormControl as the number 0  a falsy value  and hence keep it unchecked  It would be preferred not to use the number 0 as a value but if it is required  you have to conditionally set 0 to some truthy value  say string  0  or just plain true and then on submitting  convert it back to the number 0    StackBlitz example  The StackBlitz also has code for when you want to pass default values to the checkboxes so they get marked as checked in the UI

User · Answer

TEMPLATE PART -       lt div class  form-group  gt            lt label for  options  gt Options  lt  label gt            lt div  ngFor  let option of options  gt               lt label gt                   lt input type  checkbox                     name  options                     value    option value                         ngModel    option checked                                    gt                      option name                      lt  label gt                 lt  div gt                 lt br  gt            lt button  click   getselectedOptions      gt Get Selected Items lt  button gt        lt  div gt    CONTROLLER PART -          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   gt  opt checked                     map opt   gt  opt value

User · Answer

If you are looking for checkbox values in JSON format      name        countries        US   true       Germany   true       France   true         Full example here   I apologise for using Country Names as checkbox values instead of those in the question  Further explannation -  Create a FormGroup for the form   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         Let each checkbox be a FormGroup built from an object whose only property is the checkbox s value    setCountries countries string             One Form Group for one country     const countriesFGs   countries map country   gt               let obj    obj country  true              return this fb group obj               const countryFormArray   this fb array countriesFGs       this heroForm setControl  countries   countryFormArray         The array of FormGroups for the checkboxes is used to set the control for the  countries  in the parent Form     get countries    FormArray         return this heroForm get  countries   as FormArray         In the template  use a pipe to get the name for the checkbox control     lt div formArrayName  countries  class  well well-lg  gt         lt div  ngFor  let country of countries controls  let i index   formGroupName   i   gt             lt div  ngFor  let key of country controls   mapToKeys   gt                 lt input type  checkbox  formControlName    key key    gt   key key              lt  div gt         lt  div gt     lt  div gt

User · Answer

Here s a good place to use the FormArray https   angular io docs ts latest api forms index FormArray-class html  To start we ll build up our array of controls either with a FormBuilder or newing up a FormArray  FormBuilder  this checkboxGroup    fb group     myValues   fb array  true  false  true         new FormArray  let checkboxArray   new FormArray     new FormControl true     new FormControl false     new FormControl true      this checkboxGroup    fb group     myValues  checkboxArray       Easy enough to do  but then we re going to change our template and let the templating engine handle how we bind to our controls   template html   lt form  formGroup   checkboxGroup  gt       lt input  ngFor  let control of checkboxGroup controls  myValues   controls      type  checkbox  id  checkbox-1  value  value-1   formControl   control    gt          lt  form gt    Here we re iterating over our set of FormControls in our myValues FormArray and for each control we re binding  formControl  to that control instead of to the FormArray control and  lt div gt   checkboxGroup controls  myValues   value   lt  div gt  produces true false true while also making your template syntax a little less manual   You can use this example  http   plnkr co edit a9OdMAq2YIwQFo7gixbj p preview to poke around

User · Answer

If you want to use an Angular reactive form  https   angular io guide reactive-forms    You can use one form control to manage the outputted value of the group of checkboxes   component  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   gt  checkbox checked         flatMap checkbox   gt  checkbox value          checkboxes      return flattenedValues join               html   lt form  formGroup   form  gt       lt label  ngFor  let checkbox of checklistState  class  checkbox-control  gt       lt input type  checkbox   change   onChecklistChange  event target checked  checkbox    checked   checkbox checked   value   checkbox value    gt     checkbox label       lt  label gt   lt  form gt    checklistState  Manages the model state of the checklist inputs  This model allows you to map the current state to whatever value format you need   Model        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 Form Control  This control stores the value would like to save as e g  value output   value 1 value 2   See demo at https   stackblitz com edit angular-multi-checklist

[javascript] Angular ReactiveForms: Producing an array of checkbox values?

Examples related to javascript

Examples related to angular

Examples related to checkbox

Examples related to angular2-forms