Hi my name is Spencer, and I've been hurt by Angular forms. Its been two weeks since I was last hurt and hopefully with the support from this group that will be longer and longer.
One thing to be aware of with getRawValue() is that it always creates a new object. Not a concern when used as shown, but when used in a template where it gets called every change detection cycle, or in an rxjs pipeline with distinctUntilChanged you might run into issues.
Your reset method made me question how I'm setting form values in a create/edit type form that I'm reusing. Normally I set the form group first irrespective of the 'model' (in an edit mode) and then I have an observable that uses the id in the URL to set the form model values. If I passed in the model values when initializing the form group would reset then just revert the values back to the model automatically? I've been keeping the original model persisted for that purpose but your reset comments made me wonder. Also now I'm questioning if how I'm setting the form values from the model in an edit scenario is a bad practice. If you have any videos on best practices for hydrating a form from a model that'd be great. Love the videos btw. Thanks!
If I am understanding your scenario correctly - if you supplied the values from your model as the initial values for the control, then a reset (in a nonNullable form) should change those values back to the original model values that were supplied. I don't have any links to anything on that topic though!
I didn't know about nonNullable forms. I usually just wrote getters for each control value and throw an exception when it's null (which never happens).
I love how a lot of people in the comment section, are speaking about form reset(). The same happened to me. And by the way, my name is Yasin, and I was hurt by angular form. So many times.
@@JoshuaMorony I use viewprovider like that : viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] if I don't want to use CVA
The reason that .value is different from .getRawValue() is: When an input in the form is disabled. In the value, its value will be undefined. In raw value, it will get its value regardless of the disabled state. Would be nice if it was mentioned.
By the way, this logic should be changed as for me a "disabled" field does not mean that you don't want to get the value from the form. For some reason, a field can become disabled as some other field's value change.
I'm still trying to figure out how to properly get the value from my form when I have on one side a FormGroup with a control that can undefined but is required and on the other side my service with no undefined attribute. Even with form.getRawValue() you get an error as a control could be undefined regardless of the "Required" validator. Do you know if there is a best practice regarding this ? For now, I call form.valid method then form.getRawValue() as XXX.
Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076
Your're sooo saving my life. My forms look pretty ugly because of this problem. Some refactoring ison the way!
Thanks!
Hi my name is Spencer, and I've been hurt by Angular forms. Its been two weeks since I was last hurt and hopefully with the support from this group that will be longer and longer.
Hi Spencer, we are all here to listen to your story when you are ready to share
Hi Spencer, welcome to the group.
One thing to be aware of with getRawValue() is that it always creates a new object. Not a concern when used as shown, but when used in a template where it gets called every change detection cycle, or in an rxjs pipeline with distinctUntilChanged you might run into issues.
I would primary use form.controls.controlName.value in templates, so i mostly will have non-object values that are not undefined tho
Your reset method made me question how I'm setting form values in a create/edit type form that I'm reusing. Normally I set the form group first irrespective of the 'model' (in an edit mode) and then I have an observable that uses the id in the URL to set the form model values. If I passed in the model values when initializing the form group would reset then just revert the values back to the model automatically? I've been keeping the original model persisted for that purpose but your reset comments made me wonder. Also now I'm questioning if how I'm setting the form values from the model in an edit scenario is a bad practice. If you have any videos on best practices for hydrating a form from a model that'd be great. Love the videos btw. Thanks!
If I am understanding your scenario correctly - if you supplied the values from your model as the initial values for the control, then a reset (in a nonNullable form) should change those values back to the original model values that were supplied. I don't have any links to anything on that topic though!
Hi! I found your videos very interesting and engaging. I request you to make a video on Micro Frontends using Module Federation.
Am just enjoing your videos.. so helpfull
I didn't know about nonNullable forms. I usually just wrote getters for each control value and throw an exception when it's null (which never happens).
Just looked it up, it's an Angular 14 feature
Thank you it works with me
great video
Thanks it helped me install it
Hey Josh, you have a link to your example where you use this nonNullable v14 stuff?
Sorry this one is from the course I am working on so I don't have a public link for this at the moment!
@@JoshuaMorony i got it. build some myself to paly with. this 'nonNullable ' is super useful
I love how a lot of people in the comment section, are speaking about form reset(). The same happened to me.
And by the way, my name is Yasin, and I was hurt by angular form. So many times.
I knew and I had used it to make my form value adhere to a model, before typed form had been introduced. Offtopic: did you know about viewProviders?
I get the general idea but I've never used it - do you have situations where you like to use viewProviders?
@@JoshuaMorony I use viewprovider like that : viewProviders: [{
provide: ControlContainer,
useExisting: FormGroupDirective
}]
if I don't want to use CVA
The reason that .value is different from .getRawValue() is: When an input in the form is disabled. In the value, its value will be undefined. In raw value, it will get its value regardless of the disabled state. Would be nice if it was mentioned.
I do mention this at 3:54
By the way, this logic should be changed as for me a "disabled" field does not mean that you don't want to get the value from the form. For some reason, a field can become disabled as some other field's value change.
I'm so sad I watched this video this late, as I've had to learn all of this the hard way the first time
Learning it the hard way makes it stick better at least!
I think everyone stumbles awkwardly across this if they interact with angular forms.
I'm pretty sure the reason for coming across this more recently is that I was probably just getting away with more naughty stuff pre-typed forms
I enjoy angular but this one of the worst, most unintuitive apis i've ever seen in a ui toolkit.
I'm still trying to figure out how to properly get the value from my form when I have on one side a FormGroup with a control that can undefined but is required and on the other side my service with no undefined attribute.
Even with form.getRawValue() you get an error as a control could be undefined regardless of the "Required" validator.
Do you know if there is a best practice regarding this ? For now, I call form.valid method then form.getRawValue() as XXX.
getRawValue() is a great weapon to combat non straightforward obtainable values from any form! being using it since ever.