Get, Set & Update

Value retrieval and modification methods available on Form and Field instances.

---

get()

Return an object with field properties. Available on both Form and Field.

Get all props

form.get();
form.$('username').get();

Get a specific prop

form.get('value');
form.get('label');
form.get('disabled');

You can retrieve these editable props: value, label, placeholder, initial, default, disabled, related, bindings, type, options, extra, autoFocus, inputMode.

And these computed props: hasError, isValid, isDirty, isPristine, isDefault, isEmpty, focused, touched, changed, error, as well as validation props (rules, validators).

Get nested fields as objects

Pass props as an array to get nested fields structured as nested objects instead of flat collections:

form.get(['label']);
// { address: { city: 'City Name' } }

form.get(['value', 'label']);
// { username: { value: 'Steve', label: 'Username' } }

---

set()

Modify field properties. Available on both Form and Field.

Set a field value

form.$('username').set('newValue');

Set a property on multiple fields

Pass a prop name and an object of key-value pairs:

form.set('value', {
  username: 'NewUsername',
  password: 'NewPassword',
});

Set a nested field property

The object can mirror the field structure:

form.set('label', {
  address: {
    city: 'Cool City',
  },
});

Supported props

You can set: value, label, placeholder, initial, default, type, disabled, related, bindings, hooks, handlers, observers, interceptors, options, extra, autoFocus, inputMode, rules, validators.

The set() method is intended for modifying properties of existing fields. To create or remove fields, use add() / del() or update().

---

update()

Recreate the fields tree and provide new values. Accepts an object and updates all field values.

Unlike set(), update() can create new fields automatically. Use it when the field structure may need to expand (e.g. re-fetching data from a server). For simple property changes on existing fields, prefer set().

form.update({
  address: {
    city: 'Los Angeles',
  },
});

// Same on a nested field:
form.$('address').update({
  city: 'Los Angeles',
});

Array notation is supported as well:

form.update({
  members: [
    { firstname: 'Alice', lastname: 'Wonder' },
    { firstname: 'Bob', lastname: 'Marley' },
  ],
});

update() only accepts plain objects and will throw an error otherwise.