Conditionally add disabled attribute in Angular 2

Question

I have a disabled ngBootstrap datepicker. How can I disable this conditionally based on the value of a variable I have, hasExistingEnrollmentPeriods?

I've tried disabled="hasExistingEnrollmentPeriods" but that always sets disabled to true even when the expression is false.

<input class="form-control" placeholder="MM-DD-YYYY" name="effecDate" ngbDatepicker #ed="ngbDatepicker"
  (click)="ed.toggle(); DetectChange()" (ngModelChange)="onSelectEffectiveDate($event)" formControlName="effectiveDate" disabled>
  <div class="input-group-append">
     <button class="btn btn-outline-secondary calendar" (click)="ed.toggle()" type="button">
        <i class="fal fa-calendar-alt"></i>
     </button>
  </div>

Derek Wang · Accepted Answer · 2020-09-29 16:31:12Z

5

You need to use [disabled], not disabled.

disabled="hasExistingEnrollmentPeriods" means assign string value "hasExistingEnrollmentPeriods" to "disabled" attribute.
[disabled]="hasExistingEnrollmentPeriods" means assign value of "hasExisstingEnrollmentPeriods" to "disabled" attribute..

answered Sep 29, 2020 at 16:31

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Parenteau · Accepted Answer · 2020-09-29 16:30:56Z

3

Use Angular property binding with the brackets notation to make sure that the parameter is evaluated as an expression:

[disabled]="hasExistingEnrollmentPeriods"

answered Sep 29, 2020 at 16:30

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Collectives™ on Stack Overflow

Conditionally add disabled attribute in Angular 2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related