Angular 8: Show/Hide Input based on Checkbox selected

Question

I am trying to bind input fields to a list of checkbox fields generated from API. As the code shows below, it will generate 7 checkbox field.

  <form [formGroup]="actForm">
                <mat-label class="activityCheckBox"
                  formArrayName="func1Activities"
                  *ngFor="let act of actForm.controls.activity.controls; let i = index;">
                  <tpcr-input-checkbox [formControlName]="i"></tpcr-input-checkbox>
                  {{activity[i].Name}}

                  <mat-form-field ngDefaultControl class="example-full-width" type="number">
                    <input matInput class="timeInput" type="number"
                      [(ngModel)]="formProfile.timeSpent" [ngModelOptions]="{standalone:true}">
                  </mat-form-field>

                </mat-label>
  </form>

Right now, the input fields are all generated along with the activity checkbox in the ngFor loop. Is there anyway to ONLY display the specific input field if one of the checkbox is selected?

For example, Activity 1 Checkbox = checked ----> Input Field Appears Activity 2 Checkbox = unchecked ---> Input Field Hide

This is bothering me for some time now, I really appreciate your time and help!!!

Thank you.

Eliseo · Accepted Answer · 2020-02-10 19:01:38Z

1

you has a form like

actForm=new FormGroup({
  activity=new FormArray([new FormControl(),new FormControl()]
})

So, you can access into the *ngFor like

actForm.get('activity').at(i).value

or

act.value

When you iterate over let control of actForm.get('activity').controls control is, if our formArray is a FormArray of FormControls the own control -if our formArray is a formArray of formGroup I like name as let group of actForm.get('activity').controls, so "group" is the formGroup

Note, if you only has an FormArray you need'n create a formGroup, you can directly

  activity:FormArray=new FormArray([new FormControl(),new FormControl()]

And

 <div *ngFor="let control of activity.controls;let i=index">
     <input [formControl]="control">
 </div>

answered Feb 10, 2020 at 19:01

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

2 Comments

Jerry Wang Over a year ago

if I understand correctly, activity FormArray will contain two new FormControl() for each act? one is checkbox and the other one is input field? How would I toggle the input field based on the checkbox selected? thanks for your answer!

Eliseo Over a year ago

no, sorry, I explain bad. if a formArray with two elements, each one is a FormControl. The json value of actForm is {activity:['','']}. normally you has some like activity=new FormArray([]);activity.push(new FormControl());activity.push(new FormControl()) or activity=data.map(x=> new FormControl()) is an array of FormControls. Well really is a "super array" -has properties that the arrays has no

Collectives™ on Stack Overflow

Angular 8: Show/Hide Input based on Checkbox selected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related