0

I am current using ngFor in order to generate the checkbox HTML. However when using this method I am unable to assign a specific template reference variable to the other checkbox only in order to show/hide the textarea based off if the checkbox is checked or not.

I have tried to assign a template reference variable via the data array however that does not seem to work. I have also tried to create the checkboxes manually on the page, which then allows me to add the template reference variable however I dont seem to get the required values back from the checkboxes once thats done.

<ul formArrayName="health_care_goals">
    <li  class="form-group" *ngFor="let goal of health_care_goals; let i = index" formGroupName="{{i}}">
        <input id="{{goal.id}}" type="checkbox" formControlName="{{goal.id}}">
        <label for="{{goal.id}}"><span></span>{{goal.name == 'Other' ? 'Other (Provide details here)' : goal.name}}</label>
    </li>
</ul>
<textarea *ngIf="health_care_goals_other" formControlName="health_care_goals_response_other"></textarea>

for (let i = 0; i < this.health_care_goals.length; i++) {
            let fg = new FormGroup({});
            fg.addControl(this.health_care_goals[i].id, new FormControl('', Validators.required));
            all_health_care_goals.push(fg);
}

this.goalsForm = this._formBuilder.group({
            health_care_goals: all_health_care_goals,
            health_care_goals_response_other: [''],
            medication_goal_reduce_harm: medication_goal_reduce_harm_strategies,
            reduce_harm_from_effects_of_med: [''],
            reduce_harm_from_effects_of_med_text: [''],
            reducing_harms_other: ['']
});


    private health_care_goals = [
        {name: 'Prolonging life', id: 'prolonging_life'},
        {name: 'Optimising functional independence', id: 'optimising_functional_independence'},
        {name: 'Optimising quality of life', id: 'optimising_quality_of_life'},
        {name: 'Achieving a peaceful death', id: 'achieving_a_peaceful_death'},
        {name: 'Symptom control', id: 'symptom_control'},
        {name: 'Maintaining good health and preventing illness', id: 'maintaining_good_health_and_preventing_illness'},
        {name: 'Other', id: 'other'}
    ];

I would like to only show the textarea when the other checkbox is selected.

Adrian
  • 157
  • 1
  • 13

2 Answers2

0

You have to repeat on the whole div and give condition for every checkbox

<div fxFlex *ngFor="let item of items" fxLayout="row">
   <mat-checkbox value="item.value" (change)="decideToShow(item)"></mat-checkbox>
   <textarea type="text" *ngif="item.showDesc" [(ngModel)]="item.description"></textarea>
</div>

And in your ts define a function decideToShow(item).

decideToShow(item): void {
    if(item.value && index > 3){
        item.showDesc = true;
    } else {
        item.showDesc = false;
    }
}
Prashanth Damam
  • 841
  • 8
  • 25
  • I think you misunderstood me.. I just need 1 checkbox which is only attached to the other checkbox. All other checkboxes will have their own titles. Using the FormGroup I am able to get the checked checkboxes, however I am unable to display the other text field. – Adrian Aug 19 '19 at 12:40
  • Sorry! Am unable to get what you are trying to explain. Can you specify? – Prashanth Damam Aug 19 '19 at 12:43
  • I have a list of checkboxes - lets say the below, A B C D Other when a user selects either of the checkboxes from A-D no textarea is required. However if the user selects the Other checkboxe then I need to display the other textarea. Let me know if that is more clear. – Adrian Aug 19 '19 at 13:06
  • If you are not repeating the textarea then directly make it true. I hope this is what u are asking for – Prashanth Damam Aug 19 '19 at 13:28
  • thank you, I have implemented such a solution but the problem is if the Other checkbox is checked and then we select another checkbox the textarea is hidden again. I was wondering if there was a more simple/reusable method as I have 4 sections with such checkboxs and other textareas. – Adrian Aug 19 '19 at 13:42
0

For anyone who is looking for the answer this item helped me reach my requirement.

https://stackoverflow.com/a/54036689/1804886

Using a formGroup within the existing formGroup allowed me to stop using a *ngFor and implement the checkboxes individually. I can then add template reference variables in order to handle the showing and hiding of the textarea for the other checkbox.

I was able to add validation to each formGroup as well.

Adrian
  • 157
  • 1
  • 13