Angular reactive form
Continuing to my previous blog
Today I am discussing,
How can you achieve reactive form validation using angular form.
The naive way of doing is we can use required in all the input field of the form which trigger check as soon as submit button got submitted it will triggered with reif the input field is left with blank.
But our concern is not limited to this as in case of client-side validation we want to check something custom and responsive form.
Another way of approaching this requirement is we can use JQuery based event action which says ping the onChange on every keystroke event get fired.
While accompanying these all from is not worthy as it was like reinventing the wheel.And Not utilising Angular build in.
So her I am discussing the proper way of leveraging it with angular, as we know angular have two-way binding features,while we are using form-control.
And the best part is form-control under the hood uses two-way binding so we need not write our own and configure the model for it.
As per my rule, I won't be writing code. So I will provide the link of the code to achieve this.
Since angular is good at reactive things,👸 As someone had done some solid work for us like I have mentioned above from the scratch.
Now If you are wondering how to implement is, so you are not alone, unlike no wonder yes, you need to use form-module in your module.ts(the root file) and import it to your ngOinit hook part.
As soon you are done with the above part now you just create a form and provide a directive for form-Module such that all the data(input field) is bind to it, for each input field, don't forget to add form-Control name as in the respective .ts file you need to mention what kind of validation you want to add.
As you must have some requirement for adding validation for email password, and unlike for some drop-down options, provide as per requirement.
The main motive of this approach makes the code less couple and more modular to manage as in some case if you need to increase the validation options so you can achieve it as well.
And the best part is you Need not to check the value of every input which is required & validated as per rule configured, their are methods isValid which tells you whether the form inputs are according to its input rules.
I will highly recommend to go through its documentation.
Yes, I have missed one point here Since we are looking for custom messages so how to achieve that since till now we haven't discussed it.
So for achieving that you need to take the form-module object reference and trigger the error like done in the examples.
Yes, you can Extend this idea to create a dynamic form based out of Questions and input field are differentiating the input box.
My motivation is like explaining the stuff in one breath might I cheated you guys 😅 .
Anyways guys Later on If you feel something is missing please raise questions as I will love to answer
