CODEWITHSUNDEEP
angularng-bootstrap
noclist
noclist

Reputation: 1819

Conditionally add disabled attribute in Angular 2

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>

Upvotes: 1

Views: 2063

Answers (2)

Derek Wang
Derek Wang

Reputation: 10204

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

Upvotes: 5

Martin Parenteau
Martin Parenteau

Reputation: 73751

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

[disabled]="hasExistingEnrollmentPeriods"

Upvotes: 3

Related Questions