As someone who has made thousands of CRUD forms over the years, I'm going to make a plug here for Formkit. In the past I've spent countless hours looking for some shortcut to cut down the time it takes to make forms. Everything I looked into kind of worked, but it was usually either itself somewhat complicated or expensive. And it may have worked fine for basic stuff, but the first time you needed to do something complicated, you might as well have done it all by hand.
I have seen plenty of frameworks come and go over the years. I pretty much skipped them all. And boy did that pay off. I just totally bypassed a lot of crap and jumped right in to the good stuff.
Formkit CRUD
The heart of Formkit is one control that does it all. It provides flexible validation right out of the box. It also makes it easy to populate forms from a json object. Imagine if you have a form with ten textboxes on it. By giving those textboxes a name that corresponds to the key of your data object, you can just loop through the data object and automatically populate the form.
Imagine, if you have four fields or twenty, you can get a json object and populate everything with these ten lines of code:
personDetails(data) {
getNode('attributes').input(data);
getNode('attributes').hook.commit((payload, next) => {
const newPayload = {};
Object.keys(payload).forEach((key) => {
if(getNode('attributes').children.map((el) => el.name).includes(key)) {
newPayload[key] = payload[key];
}
});
return next(newPayload);
});
}
You can see it in action here: Cascading Dropdowns
In this simple form, the two select lists work to populate the details fields. Nothing fancy about the form, just a quick demo. The core of this setup is that, for example, if your data object has a key of "description," you should have a corresponding Formkit node named "description." That's it.
<form-kit
id="description"
name="description"
type="text"
label="Description"
value=""
readonly
:outer-class="{
'formkit-outer': false
}"
:inner-class="{
'formkit-inner': false
}"
inner-class="ba b--light-gray"
input-class="ba b--light-gray"
></form-kit>
There is a general discussion on this plugin here: [Feature request] Populate forms with $formkit.load(
See also: how-to-populate-formkit-input-fields