useForm

Import

import { mix, useForm, BoltElement } from 'c/boltage';

Usage

export default class myLwc extends mix(
  BoltElement,
  useForm({
    fields,
    mode,
    supportiveFields,
    objectApiName,
    boltFormError,
    customValidityReporting,
    formRef,
    asyncErrors,
    saveOnChange
  })
) { }

Methods

Constructor(fields, mode = ‘edit’) : Constructor

Name	Type	Description
fields	Field[] | Field[][] | (this) => Field[]	List of imported fields
mode	edit | insert	Use a form in edit record mode or create record mode. Defaults to edit
supportiveFields?	Field[]	Use a form in edit record mode or create record mode. Defaults to edit
objectApiName?	String	Only needed if the param fields matches this type (this) => Field[]
boltFormError?	Boolean	You can find a more detailed example here.Defaults to true
customValidityReporting?	Boolean	You can find a more detailed example here.Defaults to false
formRef?	String	You can find a more detailed example here.Defaults to form
asyncErrors?	Boolean	You can find a more detailed example here.Defaults to false
saveOnChange?	Boolean	You can find a more detailed example here.Defaults to false

Example

export default class myLwc extends mix(
  BoltElement
  useForm({fields})
) { }

withDefaultValues(record, defaultValues) : Object

Name	Type	Description
record	FormRecordRef	What is injected by this mixin
default values	Object	Object defining the shape each HTML input field should have when using alongside <c-bolt-form>

Example

export default class myLwc extends mix(
  BoltElement
  useForm({fields})
) {
  get caseWithDefaultValues() {
    return this.withDefaultValues(this.$Case, {
      foobar__c: { disabled: true }
    });
  }
}

Note

You can find a more detailed example here

Dynamic properties

$<ObjectApiName> : FormRecordRef

Note

It performs useRecordFields and useSObject under the hood, yielding the same dynamic attributes. See the docs for more info :

• useRecordFields
• useSObject

Supportive Fields

In some cases, you may want to import fields but not necessarily map them to an HTML input. To do just that, you want to use the supportive fields feature of createForm and useForm. Fields passed to the supportiveFields parameter won’t be reflected on the dynamic class property this.$<ObjectApiName> intended to be used like so for example <c-bolt-form record={$Case} />.

import { mix, useSuspense, useForm, useFormValidation, BoltElement } from 'c/boltage';
import template from './myLwc.html';
import {fields, supportiveFields} from './caseFields.js';
export default class MyLwc extends mix(
  BoltElement
  useFormValidation,
  useSuspense({template}),
  useForm({fields, supportiveFields})
) {
  @api recordId;
  async handleSave() {
    if(this.formValidity && this.Case.someSupportiveField__c === 'OK')
      await this.saveRecord(this.Case);
  }
}