How to get values from disabled form controls in a form group?

41
votes

I tried to initialize my new FormControl using form state object and I noticed then this control doesn't influence my form validation and it also disappear from FormGroup values.

this.userForm = new FormGroup({
  email: new FormControl('', Validators.required),
  firstName: new FormControl('',Validators.required),
  lastName: new FormControl('',Validators.required),
  role: new FormControl({value: 'MyValues', disabled: true},Validators.required),
 })

Now if I try to do:

this.userForm.value //email, firstName, lastName

Have someone encountered this issue ? Any solution ? Angular version: 5.2.6

4
angularformsangular-reactive-forms
I'm not sure i understood. It seems fine to me. When i write this.userForm = new FormGroup({ email: new FormControl('test', Validators.required), firstName: new FormControl('', Validators.required), lastName: new FormControl('', Validators.required), role: new FormControl({value: 'MyValues', disabled: true}, Validators.required), }) console.log(this.userForm.value);, I see my values. – Alexandre Annic
@AlexandreAnnic yes, u understood fine. But it doesn't work, I also noticed that disabled controls can't be valid nor invalid because of their status (disabled) – Oleksandr Oleksiv
disabled controls wont be returned by value or be considered on the validation of the form. If you want to print the role value, use userForm.getRawValue() – Jota.Toledo
@Jota.Toledo thank you. It worked for me. – Oleksandr Oleksiv
Added an answer as this could be useful for others – Jota.Toledo

4 Answers

108
votes

This is not an issue, is the expected behavior. If you'd like to include all values regardless of disabled status, use the following:

this.userForm.getRawValue()
8
votes

Thank you @jota-toledo for getting me 80% what I needed.

For those of you looking for a solution to the same problem but for nested forms I was able to solve by changing my usual 

this.userForm.get('nestedForm').value

to 

this.userForm.getRawValue().nestedForm
5
votes

If someone is looking for solution to get the disabled FormControl of FormArray in a FormGroup.

Try this - (this.formName.controls['formArrayName'] as FormGroup).getRawValue();

1
votes

TS solution:

this.userForm.getRawValue()

OR

HTML Only solution:

<input formControlName="name" [readonly]="condition">

OR

CSS Only solution:

pointer-events: none;

Html and Css solutions will block user to interact with input but Reactive form will get the value