CODEWITHSUNDEEP
angularangular-reactive-formsdisabled-input
Tampa
Tampa

Reputation: 78234

How to disable a input in angular2

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"

Upvotes: 180

Views: 455274

Answers (16)

Bullsized
Bullsized

Reputation: 577

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();
  }
}

Upvotes: 0

Sinisa Rudan
Sinisa Rudan

Reputation: 988

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

Upvotes: 4

Saad Abbasi
Saad Abbasi

Reputation: 853

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>

Upvotes: 1

Yoav Schniederman
Yoav Schniederman

Reputation: 5391

<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;
}

Upvotes: 15

Brock James
Brock James

Reputation: 196

can use simply like

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

I got it like this way. so i prefer.

Upvotes: -2

Anirudh
Anirudh

Reputation: 3358

I prefer this solution

In HTML file:

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

In TS file:

dynamicVariable = false; // true based on your condition

Upvotes: 4

Priyanka Arora
Priyanka Arora

Reputation: 457

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

Upvotes: 0

nick
nick

Reputation: 475

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>

Upvotes: 2

Usman Saleh
Usman Saleh

Reputation: 759

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>

Upvotes: 61

fedtuck
fedtuck

Reputation: 4214

Try using attr.disabled, instead of disabled

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

Upvotes: 417

Ifesinachi Bryan
Ifesinachi Bryan

Reputation: 2358

You could simply do this

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

Upvotes: 37

severin
severin

Reputation: 119

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

Upvotes: 3

Sumeet
Sumeet

Reputation: 391

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

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

Upvotes: 2

AVJT82
AVJT82

Reputation: 73337

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

Upvotes: 47

Ajey
Ajey

Reputation: 8202

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;
  }
}

Upvotes: 2

zurfyx
zurfyx

Reputation: 32757

I presume you meant false instead of 'false'

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

Upvotes: 7

Related Questions