Question

How to disable input field in Angular on condition?

I'm trying to disable an input field in Angular based on a specific condition, but I'm not sure how to bind the disabled property properly. I know I can use Angular's ngModel or formControl, but I’m unsure about the correct syntax or approach to dynamically disable the input field when a condition is met. Could someone explain how to disable an input field in Angular based on a condition?

Answer 1

Bind to [disabled] Attribute

You can bind the disabled attribute to an Angular expression, which could be a true or false value.

Example:

<input [disabled]="isDisabled" type="text" placeholder="Enter your text here">

<button click="toggleDisable()">Toggle Disable</button>

Component Code:

import { Component } from'@angular/core';


@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['styles/app.component.css']

}

export class AppComponent {}

isDisabled: Boolean = false;

toggleDisable() { this.isDisabled = !this.isDisabled }