Defining Flat Fields as Separated Properties

You can define these properties:

fields, values, labels, placeholders, defaults, initials, disabled, deleted, types, related, rules, options, bindings, extra, hooks, handlers, validatedWith, validators, observers, interceptors, input, output, autoFocus, inputMode, refs, classes.

Validation properties rules (DVR) and validators (VJF) can be defined as well.

You can eventually define the fields property as a fields structure.

Define Empty Fields

The label will be automatically named using the field name

as an array with empty values:

const fields = ['username', 'password']

or as an object of values:

const fields = {
  username: '',
  password: '',
};

then pass it to the Form constructor:

new Form({ fields });

Defining Values

If you want to provide a simple values object with only the initial state (for example by directly passing an object of a DB query):

The form values provided will implicitly initialize a new field.

const values = {
  username: 'SteveJobs',
  email: 's.jobs@apple.com',
};

new Form({ values });

Defining Labels

you can set the Labels for each fields separately creating a labels object and passing it to the form costructor:

...

const labels = {
  username: 'Username',
  email: 'Email',
};

new Form({ values, labels });

If you need to initialize fields without initial state you have to define a fields object as an array with the additional fields, otherwise the field will not be created:

const fields = ['username', 'email', 'password', 'passwordConfirm'];

const values = {
  username: 'SteveJobs',
  email: 's.jobs@apple.com',
};

const labels = {
  username: 'Username',
  email: 'Email',
  password: 'Password',
};

new Form({ fields, values, labels });

Defining Initials

You can pass initials values separately defining a initials object to pass to the form initializer.

The Initial values are applied on init only if the value property is not provided.

const fields = ['username', 'email'];

const initials = {
  username: 'SteveJobs',
  email: 's.jobs@apple.com',
};

new Form({ fields, initials, ... });

This is useful for handling initial values for deep nested fields.

Defining Defaults

You can pass defaults values separately defining a defaults object to pass to the form initializer.

In the example below, the fields does not have initial state, so when the form is initialized, the fields value will be empty.

The initial state will be re-setted on form reset using the default value.

const fields = ['username', 'email'];

const defaults = {
  username: 'SteveJobs',
  email: 's.jobs@apple.com',
};

new Form({ fields, defaults, ... });

Defining Disabled

You can pass disabled fields separately defining a disabled object to pass to the form initializer:

const fields = ['username', 'email'];

const disabled = {
  username: true,
  email: false,
};

new Form({ fields, disabled, ... });

Defining Related

You can also define related fields to validate at the same time defining a related object to pass to the form initializer:

const fields = ['email', 'emailConfirm'];

const related = {
  email: ['emailConfirm'], // <<---
};

new Form({ fields, related, ... });

Defining Bindings

You can define the bindings name of a pre-defined rewriter or template.

const fields = ['email'];

const bindings = {
  email: 'EmailBinding', // <<---
};

new Form({ fields, bindings, ... });

Read more about bidings here.

Define Separated Validation Objects

Using Vanilla Javascript Validation Functions (VJF)

const fields = ['email', 'emailConfirm'];

const validators = {
  email: isEmail,
  emailConfirm: [isEmail, shouldBeEqualTo('email')],
};

new Form({ fields, validators, ... });

Read more about how to Setup Vanilla Javascript Validation Functions (VJF)

Using Declarative Validation Rules (DVR)

const fields = ['email', 'password'];

const rules = {
  email: 'required|email|string|between:5,25',
  password: 'required|string|between:5,25',
};

new Form({ fields, rules, ... });

Read more about how to Setup Declarative Validation Rules (DVR)