Disable Input fields in reactive form

Question

I already tried to follow the example of other answers from here and I did not succeed    I created a reactive form  ie  dynamic  and I want to disable some fields at any given time  My form code   this form   this  fb group     name       Validators required     options  this  fb array          const control    lt FormArray gt this form controls  options    control push this  fb group     value              my html    lt div class  row  formArrayName  options  gt     lt div  ngFor  let opt of form controls options controls  let i index  gt       lt div  formGroupName   i  gt         lt select formArrayName  value  gt           lt option gt  lt  option gt           lt option gt    opt controls value    lt  option gt         lt  select gt       lt  div gt     lt  div gt   lt  div gt    I reduced the code to facilitate  I want to disable the field of type select  I tried to do the following   form   new FormGroup     first  new FormControl  value      disabled  true   Validators required         not working  Does anyone have a suggestion

User · Answer

Providing disabled property as true inside FormControl surely disables the input field  this form this fb group     FirstName   value  first name   disabled true      LastValue   last name  Validators required       The above example will disable the FirstName input field  But real problem arises when you try to access disabled field value through form like this console log this form value FirstName   and it shows as undefined instead of printing field s actual value  So  to access disabled field s value  one must use getRawValue   method provided by Reactive Forms  i e  console log this form getRawValue   FirstName   would print the actual value of form field and not undefined

User · Answer

It is bad practice to use disable in a DOM with reactive forms  You can set this option in your FormControl  when you init the from  username  new FormControl          value  this modelUser Email      disabled  true              Validators required      Validators minLength 3       Validators maxLength 99           Property value is not necessary  Or you can get your form control with get  control name  and set disable  this userForm get  username   disable

User · Answer

I solved it by wrapping my input object with its label in a field set  The fieldset should have the disabled property binded to the boolean    lt fieldset  disabled   isAnonymous  gt       lt label class  control-label  for  firstName  gt FirstName lt  label gt       lt input class  form-control  id  firstName  type  text  formControlName  firstName    gt    lt  fieldset gt

User · Answer

The disabling FormControl prevents it to be present in a form while saving  You can just set it the readonly property  And you can achieve it this way   HTML    lt select formArrayName  quot value quot   readonly     quot disableSelect quot  gt   TS   this disbaleSelect   true   Details here

User · Answer

I had the same problem  but calling this form controls  name   disable   did not fixed it because I was reloading my view  using router navigate      In my case I had to reset my form before reloading   this form   undefined  this router navigate  path

User · Answer

The best solution is here   https   netbasal com disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110  Outline of solution  in case of broken link     1  Create 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           2  Use it like so   lt input  formControl   formControl   disableControl   condition  gt     3  Since disabled inputs do not show in form value on submit you may need to use the following instead  if required    onSubmit form      const formValue   form getRawValue      gets form value including disabled controls   console log formValue

User · Answer

If you want to disable first formcontrol  then you can use below statement   this form first disable

User · Answer

This worked for me  this form get  first   disable  onlySelf  true

User · Answer

You can declare a function to enable disable all of the form control    toggleDisableFormControl value  Boolean  exclude             const state   value    disable     enable       Object keys this profileForm controls  forEach  controlName    gt          if   exclude includes controlName           this profileForm controls controlName  state                  and use it like this this toggleDisableFormControl true    email        disbale all field but email

User · Answer

setTimeout      gt    emailGroup disable

User · Answer

name    value      disabled  true   Validators required   name    value      disabled  this isDisabled   Validators required     or  this form controls  name   disable

User · Answer

Pay attention If you are creating a form using a variable for condition and trying to change it later it will not work  i e  the form will not change  For example this isDisabled   true       this cardForm   this fb group       number    value  null  disabled  this isDisabled        and if you change the variable this isDisabled   false   the form will not change  You should use  this cardForm get  number   disable     BTW  You should use patchValue method for changing value  this cardForm patchValue       number   1703

User · Answer

while making ReactiveForm  define properety disbaled in FormControl    fieldName   new FormControl  value null disabled true    html    lt input type  quot text quot  aria-label  quot billNo quot  class  quot form-control quot  formControlName  fieldName  gt

User · Answer

A more general approach would be      Variable Flag declare public formDisabled   false      Form init this form   new FormGroup     name  new FormControl  value      disabled  this formDisabled        Validators required            Enable disable form control public toggleFormState         this formDisabled    this formDisabled      const state   this formDisabled    disable     enable        Object keys this form controls  forEach  controlName    gt            this form controls controlName  state        disables enables each form control based on  this formDisabled

User · Answer

lastName  new FormControl  value      disabled  true   Validators compose  Validators required

User · Answer

this form enable   this form disable     Or formcontrol  first   this form get  first   enable   this form get  first   disable     You can set disable or enable on initial set    first  new FormControl  disabled  true   Validators required

User · Answer

If to use disabled form input elements  like suggested in correct answer  how to disable input  validation for them will be also disabled  take attention for that    And if you are using on submit button like  disabled    form valid it will exclude your field from validation

User · Answer

To make a field disable and enable of reactive form angular 2   1 To disable   Add  attr disabled   true  to input     lt input class  form-control  name  Firstname  formControlName  firstname   attr disabled   true  gt   To enable  export class InformationSectionComponent   formname   this formbuilder group   firstname               Enable whole form  this formname enable     Enable particular field alone  this formname controls firstname enable     same for disable  replace enable   with disable     This Works fine  Comment for queries

[angular] Disable Input fields in reactive form

Examples related to angular