Angular [disabled]="MyBoolean" not working

Question

I have some inputs (Checkboxes) and I want them to be disabled if my Booleans are true. But its not working... The funny thing is the submit button works just fine and thats the same method...

myComponent.html

          <form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">             <label *ngIf="!eingetragen" for="art">Art</label>             <select *ngIf="!eingetragen" formControlName="art" id="art" class="form-control" [(ngModel)]="Art" required >               <option value="festeAnmeldung">feste Anmeldung</option>               <option value="flexibleAnmeldung">flexible Anmeldung</option>             </select>             <label for="datum">Beginn Datum</label>             <input formControlName="datum" type="date" id="datum" class="form-control" required>             <label *ngIf="(Art == 'festeAnmeldung')" for="montag">Montag</label>             <input *ngIf="(Art == 'festeAnmeldung')" formControlName="montag" [disabled]="montag" type="checkbox" id="montag" class="form-control wochentag">             <label *ngIf="(Art == 'festeAnmeldung')" for="dienstag">Dienstag</label>             <input *ngIf="(Art == 'festeAnmeldung')" formControlName="dienstag" [disabled]="dienstag" type="checkbox" id="dienstag" class="form-control wochentag">             <label *ngIf="(Art == 'festeAnmeldung')" for="mittwoch">Mittwoch</label>             <input *ngIf="(Art == 'festeAnmeldung')" formControlName="mittwoch" [disabled]="mittwoch" type="checkbox" id="mittwoch" class="form-control wochentag">             <label *ngIf="(Art == 'festeAnmeldung')" for="donnerstag">Donnerstag</label>             <input *ngIf="(Art == 'festeAnmeldung')" formControlName="donnerstag" [disabled]="donnerstag" type="checkbox" id="donnerstag" class="form-control wochentag">             <label *ngIf="(Art == 'festeAnmeldung')" for="freitag">Freitag</label>             <input *ngIf="(Art == 'festeAnmeldung' )" formControlName="freitag" [disabled]="freitag" type="checkbox" id="freitag" class="form-control wochentag">         <button type="submit" [disabled]="!BetreuungsoptionForm.valid" class ="btn btn-primary">Speichern</button>         <button type="button" (click)="OnBetreuungsoptionInfos()" class ="btn btn-success">weitere Informationen</button>         <button type="button" *ngIf="!gekuendigt" (click)="OnBetreuungsoptionLoeschen()" class ="btn btn-danger">Kündigen</button>       </form> 

myComponent.ts

        this.BetreuungsoptionForm = new FormGroup         ({           art: new FormControl(),           datum: new FormControl(this.BetreuungsoptionenKindRef[d].Beginn.toString().substring(0,10)),           montag: new FormControl(this.BetreuungsoptionenKindRef[d].Montag),           dienstag: new FormControl(this.BetreuungsoptionenKindRef[d].Dienstag),           mittwoch: new FormControl(this.BetreuungsoptionenKindRef[d].Mittwoch),           donnerstag: new FormControl(this.BetreuungsoptionenKindRef[d].Donnerstag),           freitag: new FormControl(this.BetreuungsoptionenKindRef[d].Freitag)         })           if(this.BetreuungsoptionenKindRef.Montag)           {             this.montag = true;           }           if(this.BetreuungsoptionenKindRef.Dienstag)           {             this.dienstag = true;           }           if(this.BetreuungsoptionenKindRef.Mittwoch)           {             this.mittwoch = true;           }           if(this.BetreuungsoptionenKindRef.Donnerstag)           {             this.donnerstag = true;           }           if(this.BetreuungsoptionenKindRef.Freitag)           {             this.freitag = true;           } 

Answer 1

Try [attr.disabled]="freitag? true : null" or [attr.readonly]="freitag" instead.

You are able to use attributes like [class.btn-lg]="someValue" in a similar way.

Your textbox works because of this:

The disabled attribute is another peculiar example. A button's disabled property is false by default so the button is enabled. When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

from https://angular.io/guide/template-syntax