In my form, there are four checkboxes (3 for options and 1 for setting a plan) which have specific requirements:
- If all three options are checked, the set plan checkbox is automatically checked and the options disappear
- If the set plan checkbox is checked, the other options are also checked automatically, and then disappear
- If the set plan checkbox is unchecked, the other options reappear and are unchecked as well
While my code works fine for scenarios 1 and 2 leading to requirement 3, there seems to be an issue with scenario 1 not functioning properly when the set plan checkbox is unchecked. What could be missing in my code? Any advice would be appreciated.
Here's a simple Stackblitz illustrating the problem along with the source code provided.
(The actual code includes animations, so it's important that all options are checked before disappearing as per requirement 2)
HTML
<div [ngClass]="setClass()">
<div class="option">Option One
<input type="checkbox" [(ngModel)]="opt01" [checked]="setplan"/>
</div><br />
<div class="option">Option Two
<input type="checkbox" [(ngModel)]="opt02" [checked]="setplan"/>
</div><br />
<div class="option">Option There
<input type="checkbox" [(ngModel)]="opt03" [checked]="setplan"/>
</div>
</div><br>
<div style="background-color: lightgreen; width: 50%">Set Plan
<input type="checkbox" [(ngModel)]="setplan" [checked]="opt01 && opt02 && opt03"/>
</div>
TS
public opt01: boolean;
public opt02: boolean;
public opt03: boolean;
public setplan: boolean;
setClass() {
if (
(this.opt01 == true &&
this.opt02 == true &&
this.opt03 == true) ||
this.setplan == true
) {
return 'container-wrap -hidden';
} else if (this.setplan == false) {
return 'container-wrap';
}
}
CSS (not critical)
.container-wrap {
height: 120px;
position: relative;
overflow-y: hidden;
}
.container-wrap.-hidden {
height: 0px;
position: relative;
}
.option {
background-color: lightgray;
width: 50%
}