Element

abstract Class Element

Element

The generic class for all form elements.

All Known Subclasses

Constructor

Element(schema: ElementSchema, parent?: Element | null);

Parameters

schema - the schema object of this element.

type ElementOptions = {
  silent?: boolean;
};

interface ElementSchema {
  // If not provided, an id will be auto generated
  formId?: string;
  // The model name of the element,
  // used in Group as a property name in group's value,
  // if not provided. formId will be used.
  model?: string;
  // Used to generate the element properties
  props?: Record<string, any>;
  on?: Record<string, EventHandler>;
  // The options used for this element if available.
  // Note that, these options can be extended by the sub-classes
  // of `Element`
  options?: ElementOptions;
}

parent - the parent of this element.

Properties

Prop	Type	Default	Description
parent	`Element \| null`	`null`	The parent element.
model read only	`string`		model name, used as a property name in `enum` type element, e.g, `{ [field1.model]: value, [field2.model]: value }`
formId read only	`string`		The unique id of this element in the form
htmlName read only	`string`		The global unique name of the element, which can be used as name in the html form. For radio buttons this name is not unique.
valid read only	`boolean`	`true`	Identifies if this element and all its children elements are valid. On first init, a form element is always `valid`.
props	`Record<string, any> \| {}`		These properties can be used to dynamically format the user interface.
data	`WeakMap`		Usage data for the current element, useful when you want to process some underlying logic.
shaked	`boolean`	`false`	Indicate the field is shaked or not.
error read only	`string \| null`	`null`	The error message when this element is `shaked` and `invalidated`.
validation read only	`Validation`	`Validation`	The Validation object.
schema read only	`Record<string, any>`	`{}`	The current element schema.

Methods

static register

This function will be called when registering the Field element with the registerElement method

Signatures

register(options: Record<string, any>);

Parameters

options - The options was passed in the installation step.

abstract isValid

Identifies if this element and all its children elements are valid. On first init, a form element is always valid.

This method should be implemented in sub-classes

Signatures

abstract isValid(): boolean;

Returns

boolean - true if this element and all its children elements are valid, false otherwise.

abstract getHtmlName

Returns the global unique name of this element, which can be used as name in the html form. For radio buttons this name is not unique.

Signatures

getHtmlName(): string;

Returns

string - the global unique name of this element.

shake

Shake the element so that the error message can be shown.

Signatures

shake(): void;

cleanUp

Set shaked to false so that will clear the error message.

Signatures

cleanUp(): void;

addProps

Add new properties to the props property of the current element.

Signatures

addProps(props: Record<string, any>, ...args: any[]): void;

Parameters

props - object of key: value pairs, the property's value can be any primitive types, object or array, if value is function, vue-formily will treat it as a getter, and when it's called the first argument is always the current element.
...args - any additional parametters want to pass to the property's getter

getProps

Add new properties to props

Signatures

getProps(path: string, options?: { up?: boolean }): any;

Parameters

path - path string to get the property, e.g, a.b or a[b]
options

{
  // move up to `parent` element to get property 
  // if current element does not have one
  up?: boolean
}

getSchema

Return current element schema.

Signatures

getSchema(): Record<string, any>;

Returns

Current element schema.

Inherited Methods

From class Evento

emit ,
once ,
on ,
off