Tutorial: Form Methods

Form Methods

clear(...inputs)

Clears the form inputs and errors. This is not the same as reset or fresh.

Clearing the entire form:

F.clear()

Clearing a single input:

F.clear('username')

Clearing multiple inputs:

F.clear('username', 'nickname')

configure(settings)

Configures the form settings.

These are not meant to be reactive attributes.

This method also exists on the ValidatedForm.globals object to help configure global settings as well.

Configuring all forms:

ValidatedForm.globals.configure({
  inputCssClass: 'form-control'
})

Configuring all forms manually:

ValidatedForm.globals.inputCssClass = 'form-control'

Configuring a single form on creation:

const F = ValidatedForm({
  username () {}
}).configure({
  id: 'custom-form-id'
})

Configuring a form at a later time:

F.configure({
  id: 'custom-form-id'
})

Configuring a form manually:

F.instance.id = 'custom-form-id'

fresh(initialValues?)

Sets a form's initial values and/or resets the form to said values. This is not the same as reset or clear.

Basic form with default starting values:

const F = ValidatedForm({
  username () {},
  nickname () {}
}, {
  username: 'user@domain.tld'
})

Resets username to "user@domain.tld" and nickname to "":

F.fresh()

Initial values passed to ValidatedForm can be overridden using the optional argument:

F.fresh({ username: '', nickname: 'root' })

// Now reset username to "" and nickname to "root"
F.fresh()

get(...inputs)

Returns one or more values for the given input names.

Values can also be accessed using the values state.

Getting all form inputs and values:

// { username: 'user@domain.tld', password: '********', nickname: '' }
F.get()

Getting a single input value:

// { username: 'user@domain.tld' }
F.get('username')

Getting multiple input values:

// { username: 'user@domain.tld', nickname: '' }
F.get('username', 'nickname')

id(name?)

Helper function to generate the input ID for a given input name.

Getting the form's ID:

// 'f-00000'
F.id()
F.instance.id

Getting an input's ID:

// 'f-00000-username'
F.id('username')
F.instance.id + '-username'

reset(...inputs)

Resets the form data to the previously committed one. This is not the same as clear or fresh.

To persist data between resets, use either Submit or save.

Resetting the entire form:

F.reset()

Resetting a single input:

F.reset('username')

Resetting multiple inputs:

F.reset('username', 'nickname')

save(...inputs)

Saves the state of the form or a set of inputs for resetting forms.

Note that this function does not run validation and will save invalid inputs.

Saving the entire form:

F.save()

Saving a single input:

F.save('username')

Saving multiple inputs:

F.save('username', 'nickname')

set(input, value)

Sets a value or a set of values on related inputs.

This will trigger a dirty computation and the dirtyCssClass to be added.

Since the value argument is passed onto setState, it can also be a function that returns the new value. The same cannot be done by using an input object.

Using set with the value as a string:

F.set('username', 'user@domain.tld')

Using set with the value as a function:

F.set('username', (name) => name.toLowerCase())

Using set with the input as an object:

F.set({ username: 'user@domain.tld' })

validate(...inputs)

Validates the form or a set of inputs.

Validating the entire form:

F.validate()

Validating a single input:

F.validate('username')

Validating multiple inputs:

F.validate('username', 'nickname')