Form Inputs
The ValidatedForm function takes a set of validators, transformers, and initial values then returns reactive form components. Its signature is as follows:
ValidatedForm(validators: object, transformers?: object, initialValues?: object): object
Form input attributes are specified as validator keys. Attributes are case sensitive and must share the same name in each object. Names are normalized and capitalized when converted to labels(see Input label).
const F = ValidatedForm({
username (value) {
if (value === '') return 'is required'
}
})
All forms have a randomly generated, 5 character, hexadecimal based ID prefix with f-. This unique ID is used to link labels to inputs since labels don't wrap their associated inputs. The ID can be changed for the entire form using Form id or per component using Field id.
<F.Text name='username' />
<!-- Generated DOM -->
<label for="f-00000-username">Username</label>
<input id="f-00000-username" type="text" name="username" />
Input Validation
Validators have the following signature:
const validators: object = {
[name: string]: (value: string) => string | void
}
Validators return an error message when their input is invalid and don't return anything otherwise. Validation happens on the onBlur and onChange events. Error messages are prefixed with their input label when displayed.
Input Transformation
Transformers have a similar signature to validators but always return a string:
const transformers: object = {
[name: string]: (value: string) => string
}
Transformers take the input values and modifies them before running validation. This is particularly useful for enforcing certain formatting(e.g. h0h0h0 => H0H 0H0).
const F = ValidatedForm({
username () {}
}, {
username (value) {
// Input will always be converted to lower case and trimmed when validation runs
return value.toLowerCase().trim()
}
})
Input Defaults
Initial values have the following signature:
const initialValues: object = {
[name: string]: string
}
To populate the form inputs with default values, simply pass an object of attribute names and values.
const F = ValidatedForm({
username () {}
}, {
username: 'user@domain.tld'
})
The transformers argument can be omitted so long as none of the values in the initialValues object are functions.