Reset Forms in Angular using Reactive Forms
Reset Forms in Angular using Reactive Forms
💥 You can watch even more lessons from this course for free. Visit https://bit.ly/advanced-ng-forms-disc… and enroll in a free course version 💥
From this video, you will learn how to reset your Angular Forms in #angular and you will also see how it works under the hood. You will learn more about the ng-submitted status of the form and how it can be reset as well. This lesson is just a tiny part of my entire video course about Advanced Angular Forms which will level up your skills to a completely new level 🚀
🕒 Time Codes:
00:00:00 - Intro;
00:00:54 - How to reset forms;
00:14:38 - About the Full course;
00:16:45 - Outro;
💡 Short Frontend Snacks (Tips) every week here:
Twitter - https://twitter.com/DecodedFrontend
Instagram - https://www.instagram.com/decodedfron…
LinkedIn - https://www.linkedin.com/in/dmezhenskyi
#webdevelopment #angularforms #decodedfrontend
Content
0 -> resetting of angular forms sounds and looks like
quite a simple operation isn't it however in many
7.74 -> scenarios Its Behavior might be very surprising
for example when you reset your root form group
14.46 -> model then after resetting you realize that
the status of the form is still submitted
22.86 -> from this video you will learn everything
you have to know about the form resetting
27.48 -> using reactive forms in angular you will see
how the resetting logic is implemented and
33.42 -> works under the hood my name is Dmytro
Mezhenskyi and I'm really happy to see
38.64 -> you on my Channel about Advanced angular
development so please continue watching
43.68 -> until the end because we are getting
started to learn a lot of cool stuff
55.26 -> very often we need to reset the form to some
certain state after we submitted the form or at
61.68 -> some other point in time by Form resetting I mean
not only resetting the values of form controls to
68.7 -> some certain state but also resetting form control
and form group validation statuses and making the
75.6 -> form pristine and untouched this lesson is
fully dedicated exclusively to this topic
82.92 -> let's get back to the code and Implement a form
reset when the form is submitted so I will jump to
91.26 -> the method on submit and Implement some resetting
functionality here might be multiple strategies
98.7 -> how the form can be reset the strategy number one
you reset form values to null you reset validation
108.24 -> statuses and make the form with all its controls
untouched and pristine it is the easiest strategy
116.4 -> and basically everything you need to do is to take
the form instance or actually the form group that
123.42 -> represents the form and call the method reset
that's it now if I save it and go to the browser
133.2 -> and of course once I fill out the form to pass
my validators yeah then when I submitted you can
141.72 -> see that all form controls got values now all my
validation statuses were reset all form controls
150.3 -> got NG pristine and NG untouched statuses but
except by the way the NG submitted status and
158.94 -> I will come back to it in a minute additionally
I would like to highlight that not all controls
165.54 -> were reset to null the fields which were
configured as non-nullable they were reset
172.32 -> to their initial values likewise the year of
birth field but before we move to the second
178.62 -> strategy let's figure out why the NG is submitted
status wasn't reset so theoretically it should be
186.48 -> the thing is that here we reset the state of the
form group model the form group model by itself
194.22 -> doesn't necessarily represent a form right it
might be just a nested group and that's why the
201.42 -> model doesn't have any properties and methods that
are responsible for things like Mark as submitted
208.74 -> or something like that the submission State
belongs to the directive that represents the
215.52 -> form and in reactive forms it is the form group
directive if we jump to the source code we will
223.38 -> see here the property submitted and exactly this
property will read the NG control status group
230.46 -> directive when it attaches or removing or removes
the corresponding CSS classes to the host element
239.28 -> to the form host element yeah but let's quickly
get back to the source code of the form group
246.12 -> directive and check how and where the submitted
State can be changed and it can happen in couple
253.8 -> of places the first place is obviously when the
form is submitted so here this property is set to
262.32 -> True which makes their energy control status group
directive apply and G submitted CSS class to the
269.4 -> form element and the second place where submitted
State can change is when the form is reset and
278.1 -> here you can also see that it is set back to false
which causes the removal of the NG submitted CSS
286.5 -> class from the form element and as far as I know
at the moment of the recording of this video you
294.42 -> can not change the submitted status anywhere else
except those two methods this is because submitted
303.24 -> properties exposed as a read-only so you cannot
change it from the outside only those two methods
311.88 -> can change this property value using that dirty
hack so it means if you want to reset the form and
321 -> it is important for you that the NG submit status
should be reset as well then you should call this
329.16 -> method fortunately this public one and you should
call this method instead of the reset method of
337.26 -> the form group model so what we can do we can get
a reference to the form group directive instance
345 -> via view child decorator just like that and then
instead of directly resetting the model I delegate
354.9 -> it to their reset method from the directive and
once I change that I can go to the browser again
364.02 -> and again I'm going to fill out the form and when
I submit the form right now you can see that all
372.78 -> values and statuses for form controls have been
reset as well as NG submit status for the form
382.32 -> so it works however I should mention as well that
my current approach has also a drawback and namely
390.12 -> unlike the reset method of the form model this
one isn't type safe at least at the moment when I
398.52 -> record this video there the value type as you can
see is any so if you will do some typo typescript
408.48 -> will not be able to give you a hint at the build
time so keep in mind that but let's move forward
414.96 -> and have a look at the second strategy and the
second strategy is when you reset everything like
421.98 -> in the first strategy but you want to remind the
form control values as it was entered by the user
429.96 -> in this case you would need to use the same method
but this time with values you want to reset to
439.2 -> this value should be an object where the key
is a control name and it is what we Define
446.76 -> here when we build the form and the value should
be whatever value you want that fits the type of
455.04 -> course but if it should be the same value as
the value the user entered then you would need
461.94 -> to read this value from the appropriate form
control something like that right but doing so
469.38 -> for every control isn't flexible and efficient
enough so you can just provide a form value as
476.82 -> an argument because there the data is serialized
precisely in the format with in the format we need
484.56 -> now we can save this change and try it out again
uh one more time I have to properly fill out the
493.86 -> form which I'm about to submit and you can see
that the form control statuses have been reset
500.82 -> but values remind the same as I entered and
this is the second strategy in action there
510.9 -> also can be a third scenario when you want to
give an option for your user to reset the form to
517.44 -> some certain state for instance initial state for
that you would probably add an additional button
526.2 -> uh right next to the submit button but this
one will get the type reset and let's maybe
536.4 -> um disable it when the form is pristine and
this type of button triggers the form event
544.8 -> called reset in case if user clicks this button
and also let's add a CSS class to it and in my
554.1 -> Global Styles I think I already have some
styles for this kind of button in order to
560.22 -> visually you know distinguish it from the save
button and now once we have such a button we
567.48 -> can listen for reset JavaScript event and handle
it accordingly inside the on reset method that I
577.14 -> have to obviously create and provide the native
recent event as an argument for this callback
585.66 -> inside this callback we should again trigger
the reset method as we did it when we submitted
592.74 -> the form and here let's reset the first name
field to some value so far it doesn't matter
599.64 -> which exactly just it's just for testing
purposes so I save it go to the browser
607.38 -> I'm going to click the reset button and you
can see that something strange has happened
614.04 -> it was a reset to an empty value while we're
expecting to have the reset test string the
621.72 -> problem here is that native behavior of the form
when the reset event is fired despite form group
629.7 -> directive handles the reset event as well it
doesn't prevent the native behavior and this
637.74 -> is exactly the reason why our value was wiped even
though we provided it for the reset form method we
647.94 -> can easily fix it by calling prevent default on
the reset event now if we go to the browser and
656.04 -> try to click the reset button you can see that
the value was reset to what we defined in our
662.94 -> callback all right now we can go back to the code
and let's implement the feature that resets values
671.04 -> to the initial State the logic here is going
to be quite simple somewhere here I'm going to
677.76 -> introduce a new property like initial form value
regarding the type let's keep it simple so far
685.38 -> and use just any later we will make it more strict
and uh yeah then the logic is very simple after we
694.44 -> fetch the additional data for the form and build
the appropriate form controls dynamically then we
701.7 -> can record the initial value of the build form
and save it into this property we just created
710.16 -> after that we could use this property as a
parameter for the reset function in the on reset
717.12 -> method so like that here we go and by the way the
initial value should we should update also when we
725.1 -> submit the form right because after the submission
the new value becomes kind of initial value before
732.54 -> the next submission and this is basically it now
if I go back to the form and modify some Fields
741.66 -> like that then I reset the form and you can see
that values were reset to the initial values and
752.52 -> if I try to fill out the form again okay it will
take some time and if I submit the form and after
762.06 -> that I modify some field right here and try to
reset the form again then the form values were
771.12 -> set to the state after the latest submission
which is exactly the behavior I expected so
778.74 -> let's quickly recap what we have learned in order
to reset the form using reactive forms we have to
786.06 -> call the reset method that is provided by the
form group instance that represents the form
792.84 -> this method will reset values of all form controls
to null except non-valuable form controls then
800.1 -> it resets the validation State and make controls
untouched and pristine however it doesn't update
807.12 -> the NG submitted status for the form element if
it is important for you to reset that state as
812.94 -> well consider injecting the form group directive
and calling the reset form method that will do
819.48 -> the same I mean resetting but this method will
also reset the NG submitted status if you want
826.74 -> to reset controls to some specific values you can
provide an object that matches the form control
832.2 -> structure respecting also grouping and the object
Keys must match the form control names as well
840.12 -> if you want to handle the native JavaScript reset
event you have to call the prevent default method
845.88 -> on this event so it will not be handled by the
native behavior of the form when the reset event
853.14 -> is fired if you want to reset the form to the
initial form value you can get a reference to
859.62 -> the initial form values right after you build the
form and after that you can provide this value as
866.34 -> an argument for the reset method when you actually
need it this video is just a tiny tiny part of my
875.52 -> whole video course dedicated to Advanced angular
forms where in the same manner with diving deep
883.14 -> into the source code and all those stuff I try to
explain different angular forms features so just
890.52 -> take one minute to check out what you will learn
from this course in just a few easy sections you
897.48 -> will be guided through most of the template driven
and reactive forms features so you can create two
903 -> Advanced and interactive forms that will impress
everyone and leave you feel proud of your work
908.94 -> but that's not all the course strongly focuses
on custom form controls implementation so you
915.78 -> will learn a lot about control value accessor
and how it is used by angular under the hood
921.3 -> you will get to build custom form controls like
a rating picker and a simple text editor both of
927.96 -> which support template driven and reactive forms
I as well as you know validations and other form
934.26 -> control features of course in addition you
will Master a really complex component in
939.3 -> the third section here I'm talking about a drop
down component that supports option filtering
944.76 -> multi-selection and accessible keyboard navigation
with my step-by-step guidance you will be able to
951.84 -> build this advanced form control very easy already
impressive isn't it but even that is not all in
960.36 -> the reminding course sections you will learn how
to create angular forms dynamically from Json
965.4 -> config and which architecture solution can help
make it scalable and maintainable in the future
971.7 -> in the last section you will learn how to manage
validation errors globally so you can dynamically
977.76 -> render error messages for invalid controls without
generating a ton of boilerplate in your component
984.9 -> templates so enroll right now and let's take
your form building skills to a completely new
991.62 -> level the link to the course and discounts will
be in the video description alright guys that was
998.04 -> it I hope you enjoyed this video I hope you will
enjoy the course as well please subscribe to my
1003.2 -> channel if it is your first time here also check
out my other videos subscribe to my social media
1009.32 -> there I post different tips and tricks about
angular development and front-end in general
1015.08 -> well and I wish you productive week ahead
stay safe and see you in the next video
Source: https://www.youtube.com/watch?v=V4FKf8JDkC8