76

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

14 Answers 14

121

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

5
  • 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
    Commented May 2, 2018 at 9:17
  • With inputs the presence of the disabled attribute disables the input regardless of the value
    – reckface
    Commented May 2, 2018 at 9:22
  • Ahh thank you it's working! And Thanks fpr the explanation
    – Kajot
    Commented May 2, 2018 at 9: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. Commented Dec 7, 2020 at 1:54
  • 1
    [attr.readonly]="true or false" it same result (readonly) but [attr.readonly]="freitag? true : null"<< it work! thank you Commented Jan 22, 2021 at 6:31
33

Try this, trust me it's working..

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

Use null instead of false

9
  • 1
    Not working for me on Angular 9, setting to null still disables the input
    – Mick
    Commented Aug 17, 2020 at 14:51
  • 1
    <input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null"> Commented Nov 17, 2020 at 14:50
  • 1
    I'm afraid it does not work on Angular 11
    – nostop
    Commented Jul 27, 2021 at 14:49
  • 2
    Type 'null' is not assignable to type 'string | boolean'
    – CodeFinity
    Commented Jul 29, 2021 at 4:15
  • 1
    @CodeFinity just change null to false should fix the error <input [disabled]="isLoading ? true : false" /> Commented Sep 20, 2021 at 5:29
22

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

1
  • They seem to work fine when I use them. For example [disabled]="some.form.status == 'INVALID'" works well.
    – rrd
    Commented May 2, 2018 at 9:33
5

Reactive Forms:

.html file:

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

.ts file:

disableMessage = true;

0
3

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>
0

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.

0

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>
0

For angular2 with reactiveform use like below example:

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

0

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.

0

May be its too late to comment but below attribute go well with input tag to disable that field. [readonly]="dynamicVariable"

dynamicVariable ==> boolean type

1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jun 27 at 8:29
0

USE readonly and css class

<input type="text" 
       [disabled]="true" 
       readonly 
       class="form-control link-input" 
       [(ngModel)]="permaLink"
       formControlName="permalink">` `.cursor{ cursor: not-allowed !important;
}
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Sep 14, 2023 at 13:05
-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"
-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').

-3

For me none of the above worked, including the below

[disabled]="!enableDelete">

What worked for me was

[disabled]="enableSave == 'false'">
2
  • 3
    Sounds like your enableSave was a string 'false' rather than a boolean false.
    – Benjamin
    Commented Dec 5, 2019 at 23:38
  • than probably [disabled]="!!enableSave"> would work to force it into a boolean
    – tibi
    Commented Jun 23, 2020 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.