Angular [disabled]="MyBoolean" not working
AngularProperty BindingAngular Problem Overview
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;
}
Angular Solutions
Solution 1 - Angular
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>
.
Solution 2 - Angular
Try this, trust me it's working..
<input [disabled]="isLoading ? true : null" />
Use null
instead of false
Solution 3 - Angular
Reactive forms don't support native 'disabled' attribute. If you want them to work the way you wanted, try exploring this : https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110
Also see Angular reactive forms doc to do something like this in form control.
Eg: new FormControl({value:'tom', disabled: true})
Solution 4 - Angular
Reactive Forms:
.html file:
<textarea class="form-control" rows="4" formControlName="message" [readonly]="disableMessage"></textarea>
.ts file:
disableMessage = true;
Solution 5 - Angular
If you are using bootstrap and apply any background colour using class, just remove it. it will work.
<button type="submit" class='**bg-primary** text-left form-control w-auto text-white mt-4' [disabled]="manageUsers.invalid">Submit</button>
Please remove "bg-primary" in class field. then it will work.
Solution 6 - Angular
in my case, I was wrongly using FormControl, expecting that it's having the control name like [formControl]="CtrlName"
when I removed it, disabled working fine now.
Here is the disabled tag that worked for me
[disabled]="isDisabledVariable"
Solution 7 - Angular
Note: If you are using an Angular Material button, a good example is:
<button mat-button [disabled]="condition">Button</button>
This works since the library defines an input property for passing in a "disabled" value, i.e. @Input('disabled')
.
Solution 8 - Angular
For me none of the above worked, including the below
[disabled]="!enableDelete">
What worked for me was
[disabled]="enableSave == 'false'">