How to disable form control but keep value

I have a reactive form. On edit I want a control disabled.

The below works:

   this.myForm.controls['analysis_horizon'].disable();

However, the key analysis_horizon is no longer in my myForm.value hash.

How do I disable a field with a reactive form but keeping the value in the form values hash?

I tried [disabled]= but I get the below:

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

I load data from my database on edit into the form controls but I need one field to not be allowed to change.

You could use getRawValue() instead of the value property. According to the documentation:

> The aggregate value of the FormGroup, including any disabled controls. > > If you'd like to include all values regardless of disabled status, use > this method. Otherwise, the value property is the best way to get the > value of the group.

this.myForm.getRawValue()

My solution is using [attr.disabled]:

<select formControlName="foo"
  [attr.disabled]="disabled == true ? true : null"> 
</select>

Assuming you have a disabled property in your component. You have to retun null not false to enable the input.

Here is another option if you don't want to use getRawValue which changes the normal way of getting the value from forms. More reasons why I like readonly better: https://stackoverflow.com/a/7730719/1678151.

My solution also shows how to fill a form control.

component.ts

fillForm(data: any){
 if (data != null && data.firstName){
   this.form.patchValue({
     firstName: data.firstName
   })    
   this.firstNameIsReadOnly = true;
 } 

template.html

<input formControlName="firstName" [readonly]='firstNameIsReadOnly'>

styles.scss

input[readonly] {
 color: rgba(0,0,0,.38);
}

Try add onlySelf: true inside method disable:

this.myForm.controls['analysis_horizon'].disable({onlySelf: true});

I came across this problem whilst trying to implement the Angular Material Datepicker with a reactive form - I wanted the input to be disabled so only the picker can set the date, however Angular shouts at you when you use the disabled attribute in the template, and then removes the value from the form when you do it in the component form group code.

The solution I came up with is to use CSS to prevent interaction with the input:

.disable-pointer-events {
   pointer-events: none;
}

<input
  class="disable-pointer-events"
  formControlName="yourControlName"
/>