How to disable a input in angular2

Question

In the TS file is_edit = true to disable...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

    

I just simply want to disable an input based on true or false.

I tried the following:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

Answer 1

Try using attr.disabled, instead of disabled

<input [attr.disabled]="disabled ? '' : null"/>

Answer 2

If you want input to disable on some statement. use [readonly]=true or false instead of disabled.

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

Answer 3

I think I figured out the problem, this input field is part of a reactive form (?), since you have included formControlName. This means that what you are trying to do by disabling the input field with is_edit is not working, e.g your attempt [disabled]="is_edit", which would in other cases work. With your form you need to do something like this:

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

and lose the is_edit altogether.

if you want the input field to be disabled as default, you need to set the form control as:

name: [{value: '', disabled:true}]

Here's a plunker

Answer 4

You could simply do this

<input [disabled]="true" id="name" type="text">

Answer 5

<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}

Answer 6

I presume you meant false instead of 'false'

Also, [disabled] is expecting a Boolean. You should avoid returning a null.

Answer 7

I prefer this solution

In HTML file:

<input [disabled]="dynamicVariable" id="name" type="text">

In TS file:

dynamicVariable = false; // true based on your condition 

Answer 8

Actually, the currently recommended approach when using reactive forms (in order to avoid 'changed after checked' errors) is not to use the disabled attribute with a reactive form directive. You should set up disabled property of this control in your component class and the disabled attribute will actually be set in the DOM for you.

<div>
      <form [formGroup]="form">
    <p>
        <input matInput type="text" placeholder="Name" formControlName="name"/>
    </p>
    </form>
</div>

and the component code:

form: FormGroup;
  public is_edit: boolean = true;
  constructor(
    private fb: FormBuilder
    ) {
    
  }

  ngOnInit() {
    this.form = this.fb.group({
      name: [{value: '', disabled: !this.is_edit}, [Validators.required, Validators.minLength(2)]],
    });
  }

Here is a plunker with the working code: http://plnkr.co/edit/SQjxKBfvvUk2uAIb?preview

Answer 9

A note in response to Belter's comment on fedtuck's accepted answer above, since I lack the reputation to add comments.

This is not true for any of which I am aware, in line with the Mozilla docs

disabled equals to true or false

When the disabled attribute is present the element is disabled regardless of value. See this example

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>

Answer 10

Demo

make is_edit of type boolean.

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

Answer 11

What you are looking for is disabled="true". Here is an example:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

Answer 12

---

Disable TextBox in Angular 7

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Answer 13

Disabled Select in angular 9.

one thing keep in mind disabled work with boolean values in this example, I am using the (change) event with the select option if the country is not selected region will be disabled.

find.component.ts file

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

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>

Answer 14

And also if the input box/button has to remain disable, then simply <button disabled> or <input disabled> works.

Answer 15

If you are using reactive forms, do it on initialisation:

import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: '...',
  templateUrl: '...',
  styleUrls: ['...'],
})
export class Component implements OnInit {
  @Input() fc: FormControl<number> = new FormControl();

  ngOnInit(): void {
    this.disabled ? this.fc.disable() : this.fc.enable();
  }
}

Answer 16

can use simply like

     <input [(ngModel)]="model.name" disabled="disabled"

I got it like this way. so i prefer.