Reactive forms - disabled attribute

Question

I am trying to use the disabled attribute from a formControl  When I put it in the template  it works    lt md-input formControlName  id  placeholder  ID   disabled   true  gt  lt  md-input gt    But the browser alerts me      It looks like you re using the disabled attribute with a reactive form   directive  If you set disabled to true         when you set up this control in your component class  the disabled attribute will actually be set in the DOM for         you  We recommend using this approach to avoid  changed after checked  errors     Example     form   new FormGroup       first  new FormControl  value   Nancy   disabled  true   Validators required       last  new FormControl  Drew   Validators required           So I put it in the FormControl  and deleted from the template   constructor private itemsService  ItemsService        this  items           this myForm   new FormGroup           id  new FormControl  value      disabled  true   Validators required           title  new FormControl            description  new FormControl               this id   this myForm controls  id        this title   this myForm controls  title        this description   this myForm controls  description        this id patchValue this  items length       But it does not work  it is not disabling the input   What is the problem

User · Answer

I found that I needed to have a default value, even if it was an empty string for it to work. So this:

this.registerForm('someName', {
  firstName: new FormControl({disabled: true}),
});

...had to become this:

this.registerForm('someName', {
  firstName: new FormControl({value: '', disabled: true}),
});

See my question (which I don't believe is a duplicate): Passing 'disabled' in form state object to FormControl constructor doesn't work

User · Answer

I tried these in angular 7  It worked successfully   this form controls  fromField   reset    if condition         this form controls  fromField   enable      else        this form controls  fromField   disable

User · Answer

Ultimate way to do this   ngOnInit       this interPretationForm controls InterpretationType valueChanges takeWhile     gt  this alive  subscribe val   gt       console log val      You check code  it will be executed every time value change

User · Answer

The beauty of reactive forms is you can catch values changes event of any input element very easily and at the same time you can change their values  status  So here is the another way to tackle your problem by using enable disable   Here is the complete solution on stackblitz

User · Answer

Only who are using reactive forms    For native HTML elements  attr disabled  will work but for  material elements we need to dynamically disable the element   this form get  controlname   disable      Otherwise it will show in console warning message

User · Answer

this form disable   this form enable     For one formcontrol makes disable  this form get  first   disable   this form get  first   enable     Or initial set method   first  new FormControl  disabled  true   Validators required

User · Answer

disabling of mat form fields is exempted if you are using form validation so do make sure that your form field does not have any validations like validators required  this worked for me  for ex   editUserPhone  new FormControl  value      disabled true    this makes the phone numbers of user to be non editable

User · Answer

I have been using  attr disabled  because I still like this template driven than programmatic enable   disable   as it is superior IMO   Change    lt md-input formControlName  id  placeholder  ID   disabled   true  gt  lt  md-input gt    to    lt md-input formControlName  id  placeholder  ID   attr disabled   true  gt  lt  md-input gt    If you are on newer material change md-input to mat-input

User · Answer

In my case with Angular 8  I wanted to toggle enable disable of the input depending on the condition   attr disabled  didn t work for me so here is my solution  I removed  attr disabled  from HTML and in the component function performed this check  if  condition        this form controls myField disable      else       this form controls myField enable

User · Answer

Initialization  component  using   public selector   new FormControl  value      disabled  true      Then instead of using  template      lt ngx-select  multiple   true   disabled   errorSelector    ngModel    ngxval selector   items   items   lt  ngx-select gt    Just remove the attribute disabled    lt ngx-select  multiple   true    ngModel    ngxval selector   items   items   lt  ngx-select gt    And when you have items to show  launch  in component   this selector enable

User · Answer

in Angular-9 if you want to disable enable on button click here is a simple solution if you are using reactive forms  define a function in component ts file   enable example you can use the same approach for disable with  disable    toggleEnable       this yourFormName controls formFieldName enable      console log  quot Clicked quot       Call it from your component html e g  lt button type  quot button quot  data-toggle  quot form-control quot  class  quot bg-primary text-white btn-                  reset quot  style  quot width 100  quot  click   quot toggleEnable   quot  gt

User · Answer

When you create new Form control  use next  variable  FormControl   new FormControl  value      disabled  true     If you want change activity  use next  this variable enable     or this variable disable

User · Answer

add name attribute to your md-input  if it doesn t solve the problem  please post your template

User · Answer

Use  attr disabled  instead  disabled   in my case it works ok

User · Answer

You can enable disable a form control by using the following methods   control disable   or control enable    If that did not work for you can use a directive  import   NgControl   from   angular forms     Directive     selector    disableControl      export class DisableControlDirective       Input   set disableControl  condition   boolean         const action   condition    disable     enable       this ngControl control action            constructor  private ngControl   NgControl              Then you could use it like this   lt input  formControl   formControl   disableControl   disable  gt   lt button  click   disable   true  gt Disable lt  button gt   lt button  click   disable   false  gt Enable lt  button gt    This technique is described here   https   netbasal com disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110  Hope it helps

User · Answer

This was my solution   this myForm   this  formBuilder group       socDate      value      disabled  true     Validators required                lt input fxFlex  matDatepicker   picker  placeholder  Select Date  formControlName  socDate   attr disabled   true    gt

User · Answer

add disable  true  to html field  Example  disable   lt amexio-text-input formControlName  LastName  disable  true    ngModel    emplpoyeeRegistration lastName   field-label    Last Name    place-holder    Please enter last name    allow-blank   true   error-msg    errorMsg    enable-popover   true   min-length   2   min-error-msg    Minimum 2 char allowed    max-error-msg    Maximum 20 char allowed   name  xyz   max-length   20  gt   icon-feedback   true  gt   lt  amexio-text-input gt

[angular] Reactive forms - disabled attribute

Examples related to angular

Examples related to typescript