Issue
I’m trying to not display checkboxes if they are not checked in a list. The list opens automatically when a certain product is clicked. I tried to disable the checkboxes but, you can still see unchecked boxes in the list. How can I make this work? Here is my HTML code:
<mat-checkbox class="mt-16" formControlName="IsOlfactory">
Koku Alan
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsMetalEffective">
Metal Kontrolü
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsHygroscopic">
Higroskopik
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsNotSwallowed">
Yutulmaması Gereken
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsFragrance">
Koku Veren
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsNotTasted">
Tadılmaması Gereken
</mat-checkbox>
<mat-checkbox class="mt-16" formControlName="IsFrigrophic">
Frigofrik
</mat-checkbox>
Here is the TS code:
ngOnInit() {
// Reactive Form
this.form = this._formBuilder.group({
IsOlfactory: new FormControl({
value: this.data.IsOlfactory,
disabled: true,
}),
IsHygroscopic: new FormControl({
value: this.data.IsHygroscopic,
disabled: true,
}),
IsMetalEffective: new FormControl({
value: this.data.IsMetalEffective,
disabled: true,
}),
IsNotSwallowed: new FormControl({
value: this.data.IsNotSwallowed,
disabled: true,
}),
Solution
Use *ngIf
<mat-checkbox class="mt-16" formControlName="IsOlfactory" *ngIf="form.get('IsOlfactory').value">
Koku Alan
</mat-checkbox>
form is the formGroup name you have defined.
Note: This will be always hidden unless programatically given value to to the formControl
Assumption: The values are boolean (true or false)…. not a string or integer