Nowadays writing modern forms from the ground-up can be really verbose and time-consuming, even more, almost every full-stack app you build will require some.
Therefore it is useful to know and use some form libraries and tools, that simplify this process, making you more productive.
So far I'm aware of just React-hook-form and Formik. What are your favorite approaches for building forms?
Top comments (24)
In Vue, I like building my forms myself. I really like knowing what’s going on and it is pretty easy with Vue v-model to keep track of data in the form and send that in an API request.
What is your method of dealing with form errors such as "Invalid username", or "Password too short"? For small forms it's easy to display the error underneath the input, but doesn't this get difficult to manage as the form gets larger and more complex? For this reason I decided to experiment with VeeValidate
Yeah, in those cases it is nice to use a package like that.. I would still build the form fields and data attributes myself, but use vue validate on the fields for validations.
Never tried Vue to the point forms would be needed, tho I liked the simplicity and syntax 😉Reminds me a bit of Svelte, which I love working with now 😉
After working more with react lately I love Vue even more… I really like the separation of concerns with HTML being in the template and JavaScript being in the script tag. It’s much easier to go exactly to where you need.
Great to hear you found something that work for you 😉
Stick with it, as I believe that passion towards some particular tech improves productivity tremendously 😉
Thank you! I’ve felt bad about it honestly because I do want to be willing and able to work with anything. But it is encouraging hearing your input.
Nowadays, when hundreds of new tech are coming out day by day, it's impossible to learn everything, not to mention master everything. My approach to this is, I always try to check the hottest trends like monthly, but only to the point, where I understand their main working principles and use cases. Later, when the appropriate project comes, I know my advantages with the particular tech, and picking up the syntax is just a matter of time. 😉
Love it! I think I’ll be trying to use that approach from now on.
Hope that helps 😉 I believe the famous saying 'Work smart, not hard', could be well transferred to learning, as well. And the more information there is, the more crucial it becomes 😉
Please share how you create form in svelte. I was using reactive form in Angular
using sloths make building forms with vue fun!
It's probably not a great practice, but I tend to make 'custom' forms. I have a
divwithinputelements inside of it, and then a submit button on the bottom that gets the values of the inputs and does whatever it needs to do.Thanks for sharing 👍😉
Since my comfort zone for front-end is Angular, I tend to use the Angular reactive forms - never really had the time or inclination to look at a better way than just creating a load of HTML elements and hooking them up to a FormGroup...
Yeah, I guess it also depends on how much you deal with forms in the daily work, to begin with 😉
I published an article showing an example of how I use React Hook Form, IMaks, and Yup together to create forms with masks and validations. I liked this approach using RHF. What do you think?
dev.to/ttoss/taming-react-forms-wi...
I recommend to learn forms as fundamental skill. It is not so complicated, do not forget to use the document.forms Object in your JS, it is made on purpose... That way you will quickly feel stronger!
It's a bit off-topic comment but I would like to share the story
I was working on an old AngularJS(1.X) project. In that, we were manually creating forms. I had to apply dynamic validation on those forms as we fetch the validation constraints through an API request (we get constraints like max value or max length for a particular field from an API) and we also had a UI where we can change those values... So taking everything into consideration, I created a validation directive (i.e. <input custom-validator field="fieldId" ... /> ) and I have written code to fetch the constraints for particular fields in this directive and apply it to the element. (fieldId was a combination of the form entity name and the field name like ${entity_name}.${field_name} )
When we applied this dynamic validation, there were lots of forms already been there in the project without validation applied, so later I wrote a script to add this validator directive to the required fields of all forms
Django forms are pretty easy
I started using react-hook-form and I am nothing but satisfied, it gives you a lot of control over custom inputs and it is very well documeted. Kudos for the maintainers.
Form is the little devil in frontend dev, do not underestimate it. A good form took a lot of knowledge to make good form.
Hi Madza, I would suggest you to have a look into github.com/iusehooks/usetheform .