There are a variety of patterns which helps you with forms. Let's look at three of those.
We already saw how pat-inject
changes a form so that POST or GET requests are sent via ajax and the page is not reloaded.
pat-clone
can be used to build a datagrid-like field.
Basically it clones a markup structure and appends it just to the end of the pat-clone
's contents.
Form names and ids are incremented, you can define a maximum number of clones and have a button to delete individual clones.
Together with pat-sortable
You can even reoder the individual clones.
And then there is pat-validation
which hooks into the validation API with some extra constraints like a before
and after
date constraints.
pat-validation
displays the system's default translated warning messages for standard form constraints or configurable messages for custom constraints.
Since it's built upon the browser's validation API you can also use the :invalid
or :valid
pseudo CSS selectors.
Now, lets look at a example and some code:
Let's add some extra styles: