How to disable a input in angular2

In ts 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 a input based on true or false.

I tried following:

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

fedtuck

Try using attr.disabled, instead of disabled

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

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

You could simply do this

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

<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}

Usman Saleh

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>

I presume you meant false instead of 'false'

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

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

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

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

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>

I prefer this solution

In HTML file:

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

In TS file:

dynamicVariable = false; // true based on your condition

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

Priyanka Arora

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

can use simply like

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

I got it like this way. so i prefer.

来源：https://stackoverflow.com/questions/42179150/how-to-disable-a-input-in-angular2

标签

angular

angular-reactive-forms

disabled-input