Group

Class Group

The central class within the whole form handling. It is the container element for fields and other form elements. Access to the elements of a form is provided via an index based access or via an associative array access. E.g, the field firstname can be accessed with the expression myform.firstname.

All Known Subclasses

• Form

Constructor

constructor(schema: GroupSchema, parent?: Element | null);

Parameters

• schema - an object that define the element.

interface GroupSchema extends ElementSchema {
  // A group is like an object so it needs some fields.
  // vue-formily has 3 built-in field element types as below.
  fields: (FieldSchema | GroupSchema | CollectionSchema)[];
  rules?: ValidationRuleSchema[];
}

• parent - the parent of this element.

Properties

Methods

static accept

Internal function to validate the input schema, called when generating the element.

Signatures

accept(schema: any): SchemaValidation;

type SchemaValidation = {
  valid: boolean;
  reason?: string;
  infos?: Record<string, string>;
};

Parameters

• schema - schema object.

static create

This method helps to create new Group dynamically.

Signatures

create(schema: GroupSchema, parent?: Element | null): Group;

Parameters

• schema - GroupSchema object.
• parent - the parent of this element.

Returns

• Group instance

validate

Validate the element with the current value asynchronously. Firsly, it will trigger the validate event, then trying to validate all the sub elements (if cascade = true) and current group element. If all validations are valid, new value will be set otherwise will be null. Finally, an validated event will be triggered.

Signatures

validate(options?: { cascade?: boolean }): void;

Parameters

• options - The validation options.

{
  // If `true`, all sub elements will be validated
  cascade?: boolean
}

setValue

Set new value to all the sub elements asynchronously. When calling, it will loop through the properties of the inputing object, then calling the setValue to each element, when new value is set to an element, this value also mapped up to the group's value. Finally, a changed event will be triggered for current group element.

Signatures

async setValue(obj: Record<string, any>): Record<string, any> | null;

Parameters

• obj - The object with new values. Note that the object's properties have to be mapped with the model fields of the sub elements.

Returns

• the typed value or null.

clear

This method simply cleans up all valiadtion messages, and also clear all the sub elements.

Signatures

clear(): void;

reset

Reset the element and all sub elements to the default state, clean up the validation messages, and then reset the validation of the element.

Signatures

reset(): void;

shake

Shake the element and all the sub elements (if cascade === true) so that the error message can be shown.

Signatures

shake(options?: { cascade?: boolean }): void;

Parameters

• options - The validation options.

{
  // If `true`, all sub elements will be validated
  cascade?: boolean
}

addField

Add new field to current form group.

Signatures

addField(schema: FieldSchema | GroupSchema | CollectionSchema, options): Element;

Parameters

• schema - The new element field schema.
• options.

{ 
  // The index position that you want to add
  at?: number 
}

Returns

• The added element field

removeField

Remove field from current form group.

Signatures

removeField(elementOrId: Record<string, any> | string): Element | null;

Parameters

• elementOrId - The removing element field or id.

Returns

• The removed element field or null if there is no field to be removed.

getSchema

Return current schema including added element field by addField method or removed element field by removeField method.

Signatures

getSchema(): GroupSchema;

Returns

• GroupSchema.

Inherited Methods

From class Element

From class Evento

Related concepts

• ValidationRuleSchema
• ElementSchema
• FieldSchema
• CollectionSchema