Dynamically generate list of checkboxs based on array and display them

Question

I'm using ReativeForms. I have an array with values that I would like to display as checkboxes. This is what I have:

dietaryRestrictionList consists of

RestrictionType: string = which should be the name of the checkbox
IsChecked: boolean = whether it's checked or not

In my ngOnInit() I initialize my array.

this.healthInfoForm = this._fb.group(
{
    dietaryRestrictionList: this._fb.array([]),
});

When I get the data I do a for loop I set the values:

> const control =
> <FormArray>this.healthInfoForm.controls['dietaryRestrictionList']; 
> for(var i = 0; i < this.dietaryRestrictionList.length; i++){
>     let checkBoxLabel = this.dietaryRestrictionList[i].RestrictionType;  
> control.push(this._fb.group({
>         checkBoxLabel: this.dietaryRestrictionList[i].IsChecked// set whether it's checked or not
>     }))   }

Now i want to display this in the html page:

        <div formArrayName="dietaryRestrictionList" class="form-group">
            <div *ngFor="let diet of healthInfoForm.controls.dietaryRestrictionList.controls; let i=index" > 
                <div [formGroupName]="i">                               
                  <label>
                      <input type="checkbox" [formControl]="let diet of healthInfoForm.controls.[diet.boxName]" class="form-control">                              
                  </label>  
                </div>  
            </div>
        </div>

I'm trying to follow this example:https://scotch.io/tutorials/angular-2-form-validation

Things are not working. I get an error that says:

Unhandled Promise rejection: Template parse errors:
Parser Error: Unexpected token let at column 1 in [let diet of 
        healthInfoForm.controls.[diet.boxName]] in HealthInformationComponent@270:53 ("          
    <label><input type="checkbox" [ERROR ->][formControl]="let diet of healthInfoForm.controls.[diet.boxName]" class="form-control">"): HealthInformationComponent@270:53

how can I get this to work?

Pardeep Jain · Accepted Answer · 2017-03-06 10:14:44Z

1

Becasue you cannot use let local variable of angular2 inside formControl , you have to do like this to achive this

<div formArrayName="dietaryRestrictionList" class="form-group">
    <div *ngFor="let diet of healthInfoForm.controls.dietaryRestrictionList.controls; let i=index" > 
        <div [formGroupName]="i">                               
          <label>
              <input type="checkbox" [formControl]="diet[i]" class="form-control">
          </label>  
        </div>  
    </div>
</div>

answered Mar 6, 2017 at 10:14

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SmokerJones Over a year ago

I get a further error now that says: inline template:270:55 caused by: Cannot find control with unspecified name attribute

Pardeep Jain Over a year ago

yes because the control name you provide dynamically is not exist anywhere in your component so throwing this error, i think you need to use formarray in this case

SmokerJones Over a year ago

I don't quite understand. I am using a FormArray.

Collectives™ on Stack Overflow

Dynamically generate list of checkboxs based on array and display them

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related