How to access the value of an input disabled?

Question

I'm creating a reactive form in angular 2 and using material angular 2 to inputs;

I need to set an input as disabled and when submitting the value that is in the unlocked input the value to be sent. I Already created the input and the disabled is running. My problem is that when I give a submit value it does not come.

My code

this.formVariacao = this._fb.group({

   id:[p && p['id']],
   codigoItem: [p && p['codigoItem'], Validators.required],
});

My html

<md-input-container>
    <input mdInput placeholder="Código da Variação" formControlName="codigoItem" name="codigoItem">
</md-input-container>

I block the input as follows

this.formVariacao.get('codigoItem').disable();

Only when I send the form the value does not come. Alguém pode me ajudar?

Answer 1

As you noticed Angular ignores disabled form controls in the form object.

This can be easily fixed by using getRawValue(), which includes all form controls, disabled or not. So for example on your submit, you pass the form (NOT the form value) like so:

(ngSubmit)="onSubmit(formVariacao)" 

Then you can use getRawValue:

onSubmit(form) {
  console.log(form.getRawValue())
}

Answer 2

From the code docs :

 /**
     * A control is `disabled` when its `status === DISABLED`.
     *
     * Disabled controls are exempt from validation checks and
     * are not included in the aggregate value of their ancestor
     * controls.
     */

So if you're using disable() only to make the control to have disabled attribute, don't use disable(), use [attr.disbaled]="yourVariable"

LIke this :

<input [attr.disabled]="disabled" mdInput placeholder="Código da Variação" formControlName="codigoItem" name="codigoItem">

and then in your typescript :

instead of

 this.formVariacao.get('codigoItem').disable(); 

Do this :

  private disabled = false;



  this.disabled = true;