Meta API

To update the fields and form status from outside of the library, the metaAPI provides direct access to the following methods:

Available Methods

Default Form Methods

getFieldValue(field) - Get field value from default form
getFieldProperty(field, property) - Get field property from default form
updateField(field, value) - Update a field in default form
setFieldError(field, error) - Set field error in default form
validateDefaultForm() - Validate the default form

Any Form and Section Methods

getFormFieldValue(formName, section, field) - Get field value from specific form and section
getFormFieldProperty(formName, section, field, property) - Get field property from specific form and section
updateFormField(formName, section, field, value) - Update a field in specific form and section
setFormFieldError(formName, section, field, error) - Set field error in specific form and section
validateForm(formName) - Validate a specific form
metaForm - Direct access to the MetaFormUpdater instance for advanced operations

How to get a field value

From Default Form

Use getFieldValue to read the current value of a field from the default form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
 
    const value = metaAPI.getFieldValue("fromdate");

From Any Form and Section

For grouped forms or specific sections, use getFormFieldValue:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
 
    const value = metaAPI.getFormFieldValue(
        "custom_validation_form",
        "default",
        "fromdate"
    );

getFieldValue and getFormFieldValue return the field value when the form and field are available; otherwise they return undefined.

How to get a field property

From Default Form

Use getFieldProperty to read a specific property from a field in the default form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
 
    const displayName = metaAPI.getFieldProperty("fromdate", "displayName");

From Any Form and Section

For grouped forms or specific sections, use getFormFieldProperty:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
 
    const displayName = metaAPI.getFormFieldProperty(
        "custom_validation_form",
        "default",
        "fromdate",
        "displayName"
    );

getFieldProperty and getFormFieldProperty return the property value when the form, field, and property are available; otherwise they return undefined.

How to update a field

Update Default Form Field

Use updateField to update a field in the default form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    metaAPI.updateField("fromdate", "2024-01-15");

Update Any Form and Section Field

Use updateFormField to update a field in a specific form and section:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    metaAPI.updateFormField(
        "custom_validation_form",
        "default",
        "fromdate",
        "2024-01-15"
    );

How to set field errors

Set Error in Default Form Field

Use setFieldError to set an error on a field in the default form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    metaAPI.setFieldError("email", {
        errorMsg: "Invalid email address",
        isCustomError: true
    });

Set Error in Any Form and Section Field

Use setFormFieldError to set an error on a field in a specific form and section:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    metaAPI.setFormFieldError(
        "custom_validation_form",
        "default",
        "email",
        {
            errorMsg: "Invalid email address",
            isCustomError: true
        }
    );

How to validate a form

Validate Default Form

Use validateDefaultForm to validate all fields in the default form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    const errorDetails = metaAPI.validateDefaultForm();
 
    // Check if form has errors
    if (errorDetails.hasErrors) {
        // Handle validation errors
        errorDetails.errors.forEach((error) => {
            console.log(`${error.id}: ${error.errorMsg}`);
        });
    } else {
        console.log("Form is valid!");
    }

Validate Any Form

Use validateForm to validate a specific form:

    // import `meta-api`
    import { metaAPI } from "mui-forms";
    
    const errorDetails = metaAPI.validateForm("custom_validation_form");
 
    // Check if form has errors
    if (errorDetails.hasErrors) {
        // Handle validation errors
        errorDetails.errors.forEach((error) => {
            console.log(`${error.id}: ${error.errorMsg}`);
        });
    } else {
        console.log("Form is valid!");
    }

Validate Form Return Structure

{
    hasErrors: boolean,  // true if validation errors exist
    errors: [
        {
            id: string,      // Format: <formName>.<fieldName>
            errorMsg: string // Validation error message
        }
    ]
}

Example Response

{
    "hasErrors": true,
    "errors": [
        {
            "id": "User Form.email",
            "errorMsg": "Please enter a valid email address"
        },
        {
            "id": "User Form.password",
            "errorMsg": "Password must be at least 8 characters long"
        }
    ]
}

Arguments

Name	Description
field	Name of the field in the default form
formName	This is the name of the `mui-forms` which must be given as an input property while using it. e.g.: `<MuiForms name="Basic details" schema={schema} />`. Here the name is `Basic details`
section	In a grouped form, this is the name of parent section. For simple forms, use `"default"` when calling `getFormFieldValue`, `getFormFieldProperty`, or `updateFormField`
property	Name of the field property to read with `getFieldProperty` or `getFormFieldProperty`
value	Value of the field that we want to update the field with. Datatype can be `String` or `Number` or `Boolean`
error	Error object with `errorMsg` (string) and optional `isCustomError` (boolean) properties

Complete Example

For a complete working example of the validateForm API in action, check out the Validate Form Example showcasing how to validate a form and display validation errors.

Preload Form Data Icons