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
When we make a form control is disabled, it is not considered as the value during submission of the forms.
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.
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.
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()
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With