Comprehensive API for form data manipulation, field management, validation control, and form state management providing programmatic access to all form operations.
Core methods for accessing and manipulating form data with type safety and reactivity.
/**
* Get complete form data or specific fields
* @param fields - Optional field names or boolean for all/visible fields
* @returns Form data object with field values
*/
formData(): FormData;
formData(field: string | Array<string>): FormData;
formData(fields: boolean): FormData;
/**
* Get value of specific field
* @param field - Field name to retrieve
* @returns Field value or undefined if not found
*/
getValue(field: string): any;
/**
* Set field values with reactive updates
* @param field - Field name or complete form data object
* @param value - Value to set (when using field name)
*/
setValue(field: string, value: any): void;
setValue(formData: FormData): void;
/**
* Replace all form data, resetting unspecified fields
* @param formData - Complete form data to replace current values
*/
coverValue(formData: FormData): void;
/**
* Change field values with event triggering
* @param field - Field name or form data object
* @param value - New value (when using field name)
*/
changeValue(field: string, value: any): void;
changeValue(formData: FormData): void;
/**
* Alias for setValue - change field values
* @param field - Field name or form data object
* @param value - New value (when using field name)
*/
changeField(field: string, value: any): void;
changeField(formData: FormData): void;Usage Examples:
// Get all form data
const allData = api.formData();
// Get specific fields
const userData = api.formData(["username", "email"]);
// Get only visible fields
const visibleData = api.formData(false);
// Set individual field
api.setValue("username", "john_doe");
// Set multiple fields
api.setValue({
username: "john_doe",
email: "john@example.com"
});
// Replace all data
api.coverValue({
username: "jane_doe",
email: "jane@example.com",
phone: "123-456-7890"
});Methods for dynamically adding, removing, and managing form fields and their structure.
/**
* Get array of all field names in the form
* @returns Array of field name strings
*/
fields(): string[];
/**
* Add rule after specified position
* @param rule - Rule to add
* @param after - Field name to insert after (optional)
* @param child - Whether to add as child rule (optional)
*/
append(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
append(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, field: string): void;
append(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, field: string, child: boolean): void;
/**
* Add rule before specified position
* @param rule - Rule to add
* @param after - Field name to insert before (optional)
* @param child - Whether to add as child rule (optional)
*/
prepend(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
prepend(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, field: string): void;
prepend(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>, field: string, child: boolean): void;
/**
* Remove field from form
* @param field - Field name to remove
* @returns Removed rule or undefined
*/
removeField(field: string): FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
/**
* Remove rule by reference
* @param rule - Rule instance to remove
* @returns Removed rule or undefined
*/
removeRule(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;Usage Examples:
// Get all field names
const fieldNames = api.fields(); // ["username", "email", "phone"]
// Add field at end
api.append({
type: "textarea",
field: "comments",
title: "Comments"
});
// Add field after specific field
api.append({
type: "input",
field: "lastName",
title: "Last Name"
}, "username");
// Add as child field
api.append({
type: "input",
field: "city",
title: "City"
}, "address", true);
// Remove field
const removedRule = api.removeField("phone");Methods for controlling field visibility, display state, and interaction capabilities.
/**
* Control field hidden state
* @param hidden - True to hide, false to show
* @param fields - Field names to affect (optional, affects all if not specified)
*/
hidden(hidden: boolean): void;
hidden(hidden: boolean, field: string | Array<string>): void;
/**
* Get field hidden status
* @param field - Field name to check
* @returns Boolean indicating if field is hidden
*/
hiddenStatus(field: string): boolean;
/**
* Control field display state (different from hidden)
* @param display - True to display, false to hide
* @param fields - Field names to affect (optional, affects all if not specified)
*/
display(display: boolean): void;
display(display: boolean, field: string | Array<string>): void;
/**
* Get field display status
* @param field - Field name to check
* @returns Boolean indicating if field is displayed
*/
displayStatus(field: string): boolean;
/**
* Control field disabled state
* @param disabled - True to disable, false to enable
* @param fields - Field names to affect (optional, affects all if not specified)
*/
disabled(disabled: boolean): void;
disabled(disabled: boolean, field: string | Array<string>): void;
/**
* Hide or show entire form
* @param hide - True to hide form, false to show
*/
hideForm(hide?: boolean): void;Usage Examples:
// Hide specific fields
api.hidden(true, ["password", "confirmPassword"]);
// Show all fields
api.hidden(false);
// Check if field is hidden
if (api.hiddenStatus("email")) {
console.log("Email field is hidden");
}
// Disable form during submission
api.disabled(true);
// Hide entire form
api.hideForm(true);Methods for accessing, updating, and manipulating individual rules and their properties.
/**
* Get rule by field name or ID
* @param id - Field name or rule ID
* @param origin - Whether to return original rule (true) or processed rule (false)
* @returns Rule object or undefined
*/
getRule(id: string): Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
getRule(id: string, origin: true): FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
getRule(id: string, origin: false): Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
/**
* Update rule properties
* @param id - Field name or rule ID
* @param rule - Properties to update
*/
updateRule(field: string, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
updateRule(rules: { [field: string]: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> }): void;
/**
* Merge properties into existing rule
* @param id - Field name or rule ID
* @param rule - Properties to merge
*/
mergeRule(field: string, rule: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
mergeRules(rules: { [field: string]: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> }): void;
/**
* Find first rule by component type
* @param type - Component type to search for
* @param origin - Whether to return original or processed rule
* @returns First matching rule or undefined
*/
findType(type: string, origin: true): FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
findType(type: string, origin: false): Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>;
/**
* Find all rules by component type
* @param type - Component type to search for
* @param origin - Whether to return original or processed rules
* @returns Array of matching rules
*/
findTypes(type: string, origin: true): Array<FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>>;
findTypes(type: string, origin: false): Array<Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>>;
/**
* Get all rules as object or array
* @param origin - Whether to return original rules
* @returns Rules organized by type
*/
model(origin?: boolean): { [field: string]: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> };
component(origin?: boolean): { [name: string]: Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> | Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[] };
all(origin?: boolean): Rule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[];Usage Examples:
// Get specific rule
const usernameRule = api.getRule("username");
// Update rule properties
api.updateRule("email", {
props: { placeholder: "Enter your email address" }
});
// Merge properties
api.mergeRule("password", {
validate: [
{ min: 8, message: "Password must be at least 8 characters" }
]
});
// Find all input fields
const inputRules = api.findTypes("input");
// Get all field rules
const allRules = api.model();Core form operations including submission, reset, reload, and lifecycle management.
/**
* Submit form with validation
* @param success - Success callback function
* @param fail - Failure callback function
* @returns Promise resolving with form data
*/
submit(success?: (formData: FormData, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void, fail?: (api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void): Promise<any>;
/**
* Reset form fields to default values
* @param fields - Specific fields to reset (optional, resets all if not specified)
*/
resetFields(): void;
resetFields(field: string | string[]): void;
/**
* Reload form with new rules
* @param rules - New rules to replace current form structure
*/
reload(rules: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[]): void;
/**
* Refresh form rendering and state
* Forces re-render of all components and updates display
*/
refresh(): void;
/**
* Synchronize specific field or rule changes
* @param field - Field name, rule object, or array to synchronize
*/
sync(field: string | string[]): void;
sync(rule: FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs> | FormRule<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>[]): void;
/**
* Destroy form instance and clean up resources
* Removes DOM elements, event listeners, and watchers
*/
destroy(): void;
/**
* Get reactive form data binding for two-way data binding
* @returns Reactive form data object
*/
bind(): BindFormData;Methods for accessing form state, change detection, and status information.
/**
* Check if form has unsaved changes
* @returns Boolean indicating if form data has changed
*/
changeStatus(): boolean;
/**
* Clear form change status flag
* Marks form as having no unsaved changes
*/
clearChangeStatus(): void;
/**
* Update form configuration options
* @param options - New options to merge with current configuration
*/
updateOptions(options: Options<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>): void;
/**
* Set form submission handler
* @param fn - New submission handler function
*/
onSubmit(fn: (formData: FormData, api: Api<OptionAttrs, CreatorAttrs, RuleAttrs, ApiAttrs>) => void): void;
/**
* Refresh form options and update display
* Reprocesses form configuration and updates rendering
*/
refreshOptions(): void;This comprehensive API provides complete programmatic control over form behavior, data, and lifecycle management while maintaining reactivity and type safety.