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

Question

// 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?

you have a typeo: ngModel)]="invoice.autoGenerate" should be [(ngModel)]="invoice.autoGenerate" also you use invoice.autoGenerate" instead of autoGenerate ? who is this invoice ? also you miss [disabled]="autoGenerate" on your second input — noririco
@TheNsn666 invoice is my model where i have declared the autoGenerate variable — Emmon
you wrote you declared it as autoGenrate and not invoice.autoGenerate — noririco

Zonaib Zonaib · Accepted Answer · 2019-10-15T08:39:10

3

votes

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

Also look at the editor

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

1 Answers