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;
          }

This one is related to same issue, and works well https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2/43765804 — L.Horvath, Mar 09 '22 at 16:26

score 113 · Accepted Answer · edited Oct 30 '20 at 03:40

113

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

edited Oct 30 '20 at 03:40

Haha TTpro

5,137
6
45
71

answered May 02 '18 at 09:12

reckface

5,678
4
36
62

3

I tried that already but its not working.. if i use attr.disabled everything is disabled and if I use disbaled everything is enabled – Kajot May 02 '18 at 09:17
With inputs the presence of the disabled attribute disables the input regardless of the value – reckface May 02 '18 at 09:22
Ahh thank you it's working! And Thanks fpr the explanation – Kajot May 02 '18 at 09:27
1

I found having this statement, "freitag? true : null", was important for it to start working. I believe what it does is checks the property "freitag". if it is true, it sets the value of disabled to true. If it is false, it sets it to null. From what I understand, null just removes the attribute altogether. – Faisal Karim Dec 07 '20 at 01:54
1

[attr.readonly]="true or false" it same result (readonly) but [attr.readonly]="freitag? true : null"<< it work! thank you – Piyatorn Boss Jan 22 '21 at 06:31

score 28 · Answer 2 · answered Apr 17 '19 at 02:15

28

Try this, trust me it's working..

<input [disabled]="isLoading ? true : null" />

Use null instead of false

answered Apr 17 '19 at 02:15

Syamsoul Azrien

2,534
4
32
55

Not working for me on Angular 9, setting to null still disables the input – Mick Aug 17 '20 at 14:51
1

– Don Dilanga Nov 17 '20 at 14:50
1

I'm afraid it does not work on Angular 11 – nostop Jul 27 '21 at 14:49
2

`Type 'null' is not assignable to type 'string | boolean'` – CodeFinity Jul 29 '21 at 04:15
1

@CodeFinity just change null to false should fix the error `` – Fai Zal Dong Sep 20 '21 at 05:29
Tx. I don't even recall what this issue was about now. I believe I got it resolved by now. – CodeFinity Sep 21 '21 at 23:03
This doesn't work in Angular 13. You'll get "Type 'true | null' is not assignable to type 'string | boolean'. Type 'null' is not assignable to type 'string | boolean'." You need to do `[attr.disabled]="isLoading ? true : null"` – Luminous Jul 28 '22 at 19:12
for me Not working – Amila Thennakoon Mar 08 '23 at 09:34
use [attr.disabled] insted of [disabled] – Amila Thennakoon Mar 08 '23 at 09:35

score 20 · Answer 3 · answered May 02 '18 at 09:28

20

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})

answered May 02 '18 at 09:28

Chakri

247
1
5

They seem to work fine when I use them. For example [disabled]="some.form.status == 'INVALID'" works well. – rrd May 02 '18 at 09:33

score 4 · Answer 4 · edited Dec 22 '20 at 20:30

4

Reactive Forms:

.html file:

<textarea class="form-control" rows="4" formControlName="message" [readonly]="disableMessage"></textarea>

.ts file:

disableMessage = true;

edited Dec 22 '20 at 20:30

yngrdyn

363
3
13

answered Sep 11 '20 at 06:34

Salahuddin

41
3

score 2 · Answer 5 · answered Dec 15 '22 at 02:04

Sometime, I have to use 'ChangeDetectorRef' to refresh ui, then all disabled states work well.

component.ts

ready = false;
constructor(private cdr: ChangeDetectorRef){...}
private setReady(yes: boolean){
    this.ready = yes;
    this.cdr.detectChanges();
}

component.html

<button type="submit" class="btn btn-primary w-100" [disabled]="!ready" i18n>Continue</button>

score 0 · Answer 6 · answered Apr 01 '21 at 03:36

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.

score 0 · Answer 7 · answered Jul 29 '22 at 12:29

I faced this problem in my Angular app, it seemed a silly problem for me cause I disabled/enabled a couple of my elements with [disabled] or [attr.disabled] though in part of my app these things didn't work, since I was time poor & wasn't able to investigate my codes deeply I used a trick which is not the best way but it works

 <input
      *ngIf="activationEmail != ''; else EmailInput"
      [attr.disabled]="true"
      [value]="activationEmail"
      class="form-control form-control-lg"
    />
    <ng-template #EmailInput>
      <input
        class="form-control form-control-lg"
        type="email"
        formControlName="email"
        autocomplete="off"
        [ngClass]="{
          'is-invalid':
            registrationForm.controls['email'].invalid &&
            registrationForm.controls['email'].touched
        }"
      />
    </ng-template>

score 0 · Answer 8 · answered Dec 13 '22 at 12:21

0

For angular2 with reactiveform use like below example:

this.BetreuungsoptionForm.get('montag').disable();

answered Dec 13 '22 at 12:21

psahu

1

score 0 · Answer 9 · answered Apr 06 '23 at 15:03

None of the other answers, currently present, resolved my issue.

In my case, it was a symptom that Angular had other issues with my form. Upon enabling Chrome Developer Tools, I saw the following error output in the Developer Tools console:

core.mjs:8416 ERROR Error: mat-form-field must contain a MatFormFieldControl. at getMatFormFieldMissingControlError (form-field.mjs:430:12) at MatFormField._assertFormFieldControl (form-field.mjs:705:19) at MatFormField.ngAfterContentChecked (form-field.mjs:613:14) at callHook (core.mjs:2460:18) at callHooks (core.mjs:2419:17) at executeInitAndCheckHooks (core.mjs:2370:9) at refreshView (core.mjs:10383:21) at refreshComponent (core.mjs:11401:13) at refreshChildComponents (core.mjs:10132:9) at refreshView (core.mjs:10392:13)

It turned out that I was missing the matInput attribute in my <input> fields. E.g. change <input id="category"... to <input matInput id="category"...

Once I resolved the error message, that was only visible via the Developer Tools Console, the [disabled] directive started to work correctly.

score -1 · Answer 10 · answered Aug 26 '21 at 03:51

-1

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"

answered Aug 26 '21 at 03:51

NoNaMe

6,020
30
82
110

score -1 · Answer 11 · edited Apr 16 '22 at 17:18

-1

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').

edited Apr 16 '22 at 17:18

Matthew Young

151
1
1
12

answered Sep 22 '21 at 17:16

Maxime Gélinas

2,202
2
18
35

score -3 · Answer 12 · answered Nov 22 '18 at 18:37

-3

For me none of the above worked, including the below

[disabled]="!enableDelete">

What worked for me was

[disabled]="enableSave == 'false'">

answered Nov 22 '18 at 18:37

James Poulose

3,569
2
34
39

3

Sounds like your `enableSave` was a string `'false'` rather than a boolean `false`. – Benjamin Dec 05 '19 at 23:38
than probably [disabled]="!!enableSave"> would work to force it into a boolean – tibi Jun 23 '20 at 10:00

Angular [disabled]="MyBoolean" not working

12 Answers12

Linked

Related