CODEWITHSUNDEEP
angulardata-binding
Emmon
Emmon

Reputation: 385

Angular: How to enable and disable an input field based on a toggle

// in my .ts file i have declared a property

autoGenerate: boolean; 

constructor(){ 
this.autoGenerate = true; 
}

<div class="col-sm-4">
  <div class="checkbox switcher">
    <label>Invoice Number *
              <input type="checkbox" name="autoGenerate" [(ngModel)]="invoice.autoGenerate">
              <span><small></small></span>
              <small *ngIf="invoice.autoGenerate">Auto Generate</small>
              <small *ngIf="!invoice.autoGenerate">Enter Manually</small>
            </label>
  </div>
  <ng-container *ngIf="!invoice.autoGenerate">
    <input type="text" name="invoicenumber" placeholder="eg. G-INV001" class="form-control" [(ngModel)]="invoice.invoiceNumber">
  </ng-container>
</div>

I have a toggle and an input field. Toggle button is by default set to true. I need to disable the input field if the toggle is true and enable the input field if toggle is turned off.

I Am new to angular, so currently toggling the input field.

Instead of hiding or showing depending on the toggle, How can I make it the input field enabled when toggle is off and disabled when the toggle is on?

Upvotes: 0

Views: 5265

Answers (1)

Zonaib
Zonaib

Reputation: 341

Please use [disabled]="!invoice.autoGenerate" on input.

Also look at the editor

Upvotes: 4

Related Questions