How to disable a input in angular2

Question

In ts is edit   true to disable      lt input  disabled   is edit   false    true   null  id  name  type  text    ngModel    model name  formControlName  name  class  form-control  minlength  2  gt    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

User · Answer

You could simply do this   lt input  disabled   true  id  name  type  text  gt

User · Answer

If you want input to disable on some statement  use  readonly  true or false instead of disabled    lt input  readonly   this isEditable       type  text       formControlName  reporteeName       class  form-control       placeholder  Enter Name  required gt

User · Answer

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

User · Answer

Try using attr disabled  instead of disabled   lt input  attr disabled   disabled        null   gt

User · Answer

can use simply like        lt input   ngModel    model name  disabled  disabled    I got it like this way  so i prefer

User · Answer

lt input  disabled   quot is edit quot  id  quot name quot  type  quot text quot  gt   lt button  click   quot is edit    is edit quot  gt Change input state lt  button gt   export class AppComponent     is edit   boolean   false

User · Answer

Disable TextBox in Angular 7   lt div class  center-content tp-spce-hdr  gt     lt div class  container  gt       lt div class  row mx-0 mt-4  gt         lt div class  col-12  style  padding-right  700px    gt             lt div class  form-group  gt                 lt label gt Email lt  label gt                   lt input  disabled   true  type  text  id  email  name  email                     ngModel    email  class  form-control  gt             lt  div gt        lt  div gt      lt  div gt    lt  div gt

User · Answer

And also if the input box button has to remain disable  then simply  lt button disabled gt  or  lt input disabled gt  works

User · Answer

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   lt div gt         lt form  formGroup   quot form quot  gt       lt p gt           lt input matInput type  quot text quot  placeholder  quot Name quot  formControlName  quot name quot   gt       lt  p gt       lt  form gt   lt  div gt   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

User · Answer

What you are looking for is disabled  true   Here is an example    lt textarea class  customPayload  disabled  true   ngIf   showSpinner  gt  lt  textarea gt

User · Answer

I prefer this solution  In HTML file    lt input  disabled   dynamicVariable  id  name  type  text  gt    In TS file   dynamicVariable   false     true based on your condition

User · Answer

I presume you meant false instead of  false   Also   disabled  is expecting a Boolean  You should avoid returning a null

User · Answer

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  lt select  class  quot form-control quot    change   quot onChangeCountry   quot  value  quot Choose Country quot  gt                       lt option value  quot  quot  gt Choose a Country lt  option gt                       lt option value  quot US quot  gt United States lt  option gt                         lt  select gt    region disabled till country is not selected   lt select class  quot form-control quot   disabled   quot isCountrySelected quot  gt                       lt option value  quot  quot  gt Choose a Region lt  option gt                       lt option value  quot  quot  gt Any regions  lt  option gt                                        lt  select gt

User · Answer

Demo  make is edit of type boolean    lt input  disabled  is edit id  name  type  text  gt   export class App     name string    is edit  boolean     constructor         this name    Angular2      this is edit   true

User · Answer

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   lt input placeholder  i can be changed   gt   lt input disabled placeholder  i can NOT be changed   gt   lt input disabled  true  placeholder  i can NOT be changed   gt   lt input disabled  false  placeholder  i can NOT be changed   gt

[angular] How to disable a input in angular2

Examples related to angular

Examples related to angular-reactive-forms

Examples related to disabled-input