adminizer

Back

Form Error Management

Overview

A lightweight reactive error management system for forms using JavaScript Proxy.

API Reference

Methods

setFieldError(fieldName: string, hasError: boolean, message?: string)

Sets or clears field-level errors.

Parameters:

• fieldName  string      Field identifier
• hasError    boolean  Whether error exists
• message?    string      Optional error message

getFieldError(fieldName: string): string | undefined

Retrieves error message for a field.

Returns: Error message string or undefined

hasFormErrors(): boolean

Checks if form contains any errors.

Returns: true if any field has errors

resetFormErrors()

Clears all form errors.

Type Definitions

interface ErrorState {
  hasError: boolean;
  message?: string;
}

interface FormState {
  errors: Record<string, ErrorState>;
}

Example

// Set error
setFieldError('email', true, 'Invalid email format');

// Check errors
if (hasFormErrors()) {
console.log('Form has validation errors');
}

// Get specific error
console.log(getFieldError('email')); // 'Invalid email format'

// Clear errors
resetFormErrors();

In custom controls, add errors like this:

setFieldError(props.name, true, 'message');

The custom control is called dynamically and receives the following props:

   <DynamicControls moduleComponent={field.options?.path as string} options={field.options?.config}
    initialValue={value} name={`${field.type}-${field.name}`}
    onChange={handleEditorChange}/>

Therefore, you should use props.name when adding errors
Error output is implemented in the form like this:

//...
 <>
    <LabelRenderer field={field}/>
    <InputError message={getFieldError(`${field.type}-${field.name}`)}/>
    <LazyField
    field={field}
    value={data[field.name]}
    onChange={handleFieldChange}
    processing={processing || view}
    />
</>
//...

implementation

See the implementation here src/assets/js/components/VanillaJSONEditor.tsx

This site is open source. Improve this page.