Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 418
Oleksandr Oleksiv Avatar asked Apr 05 '18 14:04

Oleksandr Oleksiv


People also ask

Can we get the value of form control after disabling it Angular?

When we make a form control is disabled, it is not considered as the value during submission of the forms.

How do I turn off form control and keep value?

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.

How do you find the form control value?

To fetch the value of a form control, we have to use value property on the instance of FormControl in our class. In the same way we can fetch the value in HTML template. city = new FormControl('Noida'); console.


2 Answers

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() 
like image 72
Jota.Toledo Avatar answered Sep 21 '22 08:09

Jota.Toledo


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 
like image 29
eper Avatar answered Sep 21 '22 08:09

eper