Logic

Form Controller

A lightweight yet powerful form management system for building dynamic, multi-step forms with advanced validation capabilities.

Overview API Examples Extensibility

Examples

Explore interactive examples of Form Controller in action.

Single-Step Form Example

Beginner-friendly example

A basic form with field validation and submission handling. Perfect starting point for learning Form Controller basics.

Debug Information

Form Data:

{
  "contact": {
    "name": "",
    "email": ""
  }
}

Single-Step Form Example

A basic form with field validation and submission handling. Perfect starting point for learning Form Controller basics.

Basic Form Setup

The simplest form setup uses a single step with basic field validation:

1// Define your form configuration
2const formConfig = {
3  steps: [
4    {
5      id: 'contact',
6      title: 'Contact Information',
7      fields: {
8        name: {
9          id: 'name',
10          value: '',
11          label: 'Full Name',
12          type: 'text',
13          required: true,
14        },
15        email: {
16          id: 'email',
17          value: '',
18          label: 'Email Address',
19          type: 'email',
20          required: true,
21          validation: {
22            pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
23          }
24        }
25      }
26    }
27  ]
28};
29
30// Initialize the form controller
31const { state, methods } = useUplink(
32  () => FormController(formConfig),
33  { trackBindings: "all" }
34);

Form Component Implementation

Implement your form with fields and error handling:

1<form onSubmit={handleSubmit}>
2  <div>
3    <label>
4      Full Name <span className="text-red-500">*</span>
5    </label>
6    <input 
7      type="text"
8      value={state.formData.contact?.name || ""}
9      onChange={(e) => methods.updateField('contact', 'name', e.target.value)}
10    />
11    {state.fieldErrors.contact?.name && (
12      <div className="error">
13        {state.fieldErrors.contact.name}
14      </div>
15    )}
16  </div>
17
18  <div>
19    <label>
20      Email Address <span className="text-red-500">*</span>
21    </label>
22    <input 
23      type="email"
24      value={state.formData.contact?.email || ""}
25      onChange={(e) => methods.updateField('contact', 'email', e.target.value)}
26    />
27    {state.fieldErrors.contact?.email && (
28      <div className="error">
29        {state.fieldErrors.contact.email}
30      </div>
31    )}
32  </div>
33
34  <button type="submit">Submit</button>
35</form>

Form Submission Handling

Implement form submission with validation handling:

1// Handle form submission
2const handleSubmit = (e) => {
3  e.preventDefault();
4  const result = methods.submitForm();
5
6  if (result.success) {
7    console.log('Form data:', result.data);
8    // Process the valid form data
9    // For example: make an API call, show success message, etc.
10    alert("Form submitted successfully!");
11  } else {
12    // Handle validation errors
13    alert("Please fix the errors before submitting.");
14  }
15};

Key Benefits

This simple form example demonstrates:

Basic form configuration and setup
Field validation with pattern matching
Form submission and data handling
Error reporting and validation feedback
Simple state management with minimal code

Best Practice: Always provide clear validation feedback to users and disable the submit button when the form is invalid to prevent unnecessary submission attempts.

Complete Code Example

Single-Step Form Example

1import React from "react";
2import { useUplink } from " @uplink-protocol/react";
3import { FormController } from "@uplink-protocol/form-controller";
4
5function DynamicFormStepper() {
6  // Define your form configuration
7  const formConfig = {
8    steps: [
9      {
10        id: 'contact',
11        title: 'Contact Information',
12        fields: {
13          name: {
14            id: 'name',
15            value: '',
16            label: 'Full Name',
17            type: 'text',
18            required: true,
19          },
20          email: {
21            id: 'email',
22            value: '',
23            label: 'Email Address',
24            type: 'email',
25            required: true,
26            validation: {
27              pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
28            }
29          }
30        }
31      }
32    ]
33  };
34
35  // Initialize the form controller with useUplink
36  const { state, methods } = useUplink(
37    () => FormController(formConfig),
38    { trackBindings: "all" }
39  );
40
41  // Handle form submission
42  const handleSubmit = (e) => {
43    e.preventDefault();
44    const result = methods.submitForm();
45
46    if (result.success) {
47      console.log('Form data:', result.data);
48      alert("Form submitted successfully!");
49    } else {
50      alert("Please fix the errors before submitting.");
51    }
52  };
53
54  return (
55    <form onSubmit={handleSubmit}>
56      <div>
57        <label>
58          Full Name <span style={{ color: "red" }}>*</span>
59        </label>
60        <input 
61          type="text"
62          value={state.formData.contact?.name || ""}
63          onChange={(e) => methods.updateField('contact', 'name', e.target.value)}
64        />
65        {state.fieldErrors.contact?.name && (
66          <div className="error">
67            {state.fieldErrors.contact.name}
68          </div>
69        )}
70      </div>
71
72      <div>
73        <label>
74          Email Address <span style={{ color: "red" }}>*</span>
75        </label>
76        <input 
77          type="email"
78          value={state.formData.contact?.email || ""}
79          onChange={(e) => methods.updateField('contact', 'email', e.target.value)}
80        />
81        {state.fieldErrors.contact?.email && (
82          <div className="error">
83            {state.fieldErrors.contact.email}
84          </div>
85        )}
86      </div>
87
88      <button type="submit">Submit</button>
89    </form>
90  );
91}

About this Example

This simple form example demonstrates:

Basic form configuration and setup
Field validation with pattern matching
Form submission and data handling
Error reporting and validation feedback
Debug panel to view current form state

The form uses the actual @uplink-protocol/react and@uplink-protocol/form-controllerpackages for form state management and validation. This is the simplest form type - for more complex examples like multi-step forms, dynamic field generation, and advanced validation, see the documentation.

Multi-Step Form Example

Intermediate example

A more advanced form with multiple steps and navigation controls. Shows how to implement wizard-like forms with progressive data collection.

Personal Info

Address

Review

Debug Information

Current Step: personal (1 of 3)

Form Data:

{
  "personal": {
    "firstName": "",
    "lastName": "",
    "email": ""
  },
  "address": {
    "street": "",
    "city": "",
    "zipCode": ""
  },
  "review": {}
}

Advanced Validation Example

A form showcasing custom validators and dynamic field validation rules. Demonstrates complex validation patterns like conditional requirements and field matching.

Custom Validator Registration

1// Register custom validators
2useEffect(() => {
3  // Register requiredIf validator
4  methods.registerValidator('requiredIf', (value, context) => {
5    const { dependsOn, dependsOnValue } = context.field.validation.dynamicValidatorParams || {};
6    
7    if (dependsOn) {
8      // Get the value of the field this field depends on
9      const stepId = context.field.stepId;
10      const dependentValue = context.formData[stepId][dependsOn];
11      
12      // Check if the condition is met
13      if (dependentValue === dependsOnValue) {
14        // Field is required
15        if (!value) {
16          return `${context.field.label} is required when subscribed`;
17        }
18      }
19    }
20    
21    return true; // validation passes
22  });
23  
24  // Register equals validator
25  methods.registerValidator('equals', (value, context) => {
26    const { matchField, errorMessage } = context.field.validation.dynamicValidatorParams || {};
27    
28    if (matchField) {
29      const stepId = context.field.stepId;
30      const fieldToMatch = context.formData[stepId][matchField];
31      
32      if (value !== fieldToMatch) {
33        return errorMessage || `${context.field.label} must match ${matchField}`;
34      }
35    }
36    
37    return true; // validation passes
38  });
39  
40  // Cleanup validators when component unmounts
41  return () => {
42    methods.unregisterValidator('requiredIf');
43    methods.unregisterValidator('equals');
44  };
45}, [methods]);

Dynamic Field Configuration

Configure fields with dynamic validation rules:

1const formConfig = {
2  steps: [
3    {
4      id: 'contact',
5      title: 'Contact Information',
6      fields: {
7        // Other fields...
8        subscribe: {
9          id: 'subscribe',
10          value: false,
11          label: 'Subscribe to newsletter',
12          type: 'checkbox',
13        },
14        phoneNumber: {
15          id: 'phoneNumber',
16          value: '',
17          label: 'Phone Number',
18          type: 'tel',
19          validation: {
20            dynamicValidator: 'requiredIf',
21            dynamicValidatorParams: {
22              dependsOn: 'subscribe',
23              dependsOnValue: true
24            }
25          }
26        },
27        password: {
28          id: 'password',
29          value: '',
30          label: 'Password',
31          type: 'password',
32          required: true,
33        },
34        confirmPassword: {
35          id: 'confirmPassword',
36          value: '',
37          label: 'Confirm Password',
38          type: 'password',
39          required: true,
40          validation: {
41            dynamicValidator: 'equals',
42            dynamicValidatorParams: {
43              matchField: 'password',
44              errorMessage: 'Passwords must match'
45            }
46          }
47        }
48      }
49    }
50  ]
51};

Conditional UI Rendering

Update UI based on dynamic validation state:

1// Render phone number field with conditional requirement
2<div className="form-field">
3  <label>
4    Phone Number {state.formData.contact?.subscribe && <span className="required">*</span>}
5  </label>
6  <input
7    type="tel"
8    value={state.formData.contact?.phoneNumber || ''}
9    onChange={(e) => methods.updateField('contact', 'phoneNumber', e.target.value)}
10  />
11  {state.fieldErrors.contact?.phoneNumber && (
12    <div className="error">{state.fieldErrors.contact.phoneNumber}</div>
13  )}
14</div>
15
16// Subscription checkbox that affects other fields
17<div className="form-field checkbox">
18  <input
19    type="checkbox"
20    checked={state.formData.contact?.subscribe || false}
21    onChange={(e) => methods.updateField('contact', 'subscribe', e.target.checked)}
22    id="subscribe"
23  />
24  <label htmlFor="subscribe">Subscribe to newsletter</label>
25</div>

Key Benefits

This advanced validation example demonstrates:

Custom validators with full form context
Conditional field requirements
Cross-field validation (password matching)
Dynamic UI updates based on validation state
Proper error handling and display

Implementation Note: The key to implementing complex validation logic is registering custom validators that can access the full form context, including values of other fields.

Complete Code Example

Advanced Validation Form Example

1import React, { useEffect } from "react";
2import { useUplink } from " @uplink-protocol/react";
3import { FormController } from "@uplink-protocol/form-controller";
4
5function AdvancedValidationForm() {
6  // Define your form configuration
7  const formConfig = {
8    steps: [
9      {
10        id: 'contact',
11        title: 'Contact Information',
12        fields: {
13          name: {
14            id: 'name',
15            value: '',
16            label: 'Full Name',
17            type: 'text',
18            required: true,
19          },
20          email: {
21            id: 'email',
22            value: '',
23            label: 'Email Address',
24            type: 'email',
25            required: true,
26            validation: {
27              pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
28            }
29          },
30          subscribe: {
31            id: 'subscribe',
32            value: false,
33            label: 'Subscribe to newsletter',
34            type: 'checkbox',
35          },
36          phoneNumber: {
37            id: 'phoneNumber',
38            value: '',
39            label: 'Phone Number',
40            type: 'tel',
41            validation: {
42              dynamicValidator: 'requiredIf',
43              dynamicValidatorParams: {
44                dependsOn: 'subscribe',
45                dependsOnValue: true
46              }
47            }
48          },
49          password: {
50            id: 'password',
51            value: '',
52            label: 'Password',
53            type: 'password',
54            required: true,
55          },
56          confirmPassword: {
57            id: 'confirmPassword',
58            value: '',
59            label: 'Confirm Password',
60            type: 'password',
61            required: true,
62            validation: {
63              dynamicValidator: 'equals',
64              dynamicValidatorParams: {
65                matchField: 'password',
66                errorMessage: 'Passwords must match'
67              }
68            }
69          }
70        }
71      }
72    ]
73  };
74
75  // Initialize the form controller with useUplink
76  const { state, methods } = useUplink(
77    () => FormController(formConfig),
78    { trackBindings: "all" }
79  );
80
81  // Register custom validators
82  useEffect(() => {
83    // Register requiredIf validator
84    methods.registerValidator('requiredIf', (value, context) => {
85      const { dependsOn, dependsOnValue } = context.field.validation.dynamicValidatorParams || {};
86      
87      if (dependsOn) {
88        // Get the value of the field this field depends on
89        const stepId = context.field.stepId;
90        const dependentValue = context.formData[stepId][dependsOn];
91        
92        // Check if the condition is met
93        if (dependentValue === dependsOnValue) {
94          // Field is required
95          if (!value) {
96            return `${context.field.label} is required when subscribed`;
97          }
98        }
99      }
100      
101      return true; // validation passes
102    });
103    
104    // Register equals validator
105    methods.registerValidator('equals', (value, context) => {
106      const { matchField, errorMessage } = context.field.validation.dynamicValidatorParams || {};
107      
108      if (matchField) {
109        const stepId = context.field.stepId;
110        const fieldToMatch = context.formData[stepId][matchField];
111        
112        if (value !== fieldToMatch) {
113          return errorMessage || `${context.field.label} must match ${matchField}`;
114        }
115      }
116      
117      return true; // validation passes
118    });
119    
120    // Cleanup validators when component unmounts
121    return () => {
122      methods.unregisterValidator('requiredIf');
123      methods.unregisterValidator('equals');
124    };
125  }, [methods]);
126
127  // Handle form submission
128  const handleSubmit = (e) => {
129    e.preventDefault();
130    const result = methods.submitForm();
131
132    if (result.success) {
133      console.log('Form data:', result.data);
134      alert("Form submitted successfully!");
135    } else {
136      alert("Please fix the errors before submitting.");
137    }
138  };
139
140  return (
141    <form onSubmit={handleSubmit} className="space-y-6">
142      <div className="form-field">
143        <label>
144          Full Name <span className="required">*</span>
145        </label>
146        <input
147          type="text"
148          value={state.formData.contact?.name || ''}
149          onChange={(e) => methods.updateField('contact', 'name', e.target.value)}
150        />
151        {state.fieldErrors.contact?.name && (
152          <div className="error">{state.fieldErrors.contact.name}</div>
153        )}
154      </div>
155
156      <div className="form-field">
157        <label>
158          Email Address <span className="required">*</span>
159        </label>
160        <input
161          type="email"
162          value={state.formData.contact?.email || ''}
163          onChange={(e) => methods.updateField('contact', 'email', e.target.value)}
164        />
165        {state.fieldErrors.contact?.email && (
166          <div className="error">{state.fieldErrors.contact.email}</div>
167        )}
168      </div>
169
170      <div className="form-field checkbox">
171        <input
172          type="checkbox"
173          checked={state.formData.contact?.subscribe || false}
174          onChange={(e) => methods.updateField('contact', 'subscribe', e.target.checked)}
175          id="subscribe"
176        />
177        <label htmlFor="subscribe">Subscribe to newsletter</label>
178      </div>
179
180      <div className="form-field">
181        <label>
182          Phone Number {state.formData.contact?.subscribe && <span className="required">*</span>}
183        </label>
184        <input
185          type="tel"
186          value={state.formData.contact?.phoneNumber || ''}
187          onChange={(e) => methods.updateField('contact', 'phoneNumber', e.target.value)}
188        />
189        {state.fieldErrors.contact?.phoneNumber && (
190          <div className="error">{state.fieldErrors.contact.phoneNumber}</div>
191        )}
192      </div>
193
194      <div className="form-field">
195        <label>
196          Password <span className="required">*</span>
197        </label>
198        <input
199          type="password"
200          value={state.formData.contact?.password || ''}
201          onChange={(e) => methods.updateField('contact', 'password', e.target.value)}
202        />
203        {state.fieldErrors.contact?.password && (
204          <div className="error">{state.fieldErrors.contact.password}</div>
205        )}
206      </div>
207
208      <div className="form-field">
209        <label>
210          Confirm Password <span className="required">*</span>
211        </label>
212        <input
213          type="password"
214          value={state.formData.contact?.confirmPassword || ''}
215          onChange={(e) => methods.updateField('contact', 'confirmPassword', e.target.value)}
216        />
217        {state.fieldErrors.contact?.confirmPassword && (
218          <div className="error">{state.fieldErrors.contact.confirmPassword}</div>
219        )}
220      </div>
221
222      <button 
223        type="submit"
224        disabled={!state.isFormValid}
225        className="submit-button"
226      >
227        Submit
228      </button>
229    </form>
230  );
231}

Key Features

Step-based navigation with progress indicator
State persistence between steps
Validation before progressing to next step
Step completion tracking and navigation controls
Comprehensive form submission with aggregated data

Implementation Highlights:

Uses currentStep, prevStep, and nextStep methods for navigation
Validates each step with validateStep method
Tracks validation with isCurrentStepValid state
Collects all form data with getFlatData on final submission

Advanced Validation Example

Advanced example

A form showcasing custom validators and dynamic field validation rules. Demonstrates complex validation patterns like conditional requirements and field matching.

Debug Information

Form Data:

{
  "contact": {
    "name": "",
    "email": "",
    "subscribe": false,
    "phoneNumber": "",
    "password": "",
    "confirmPassword": ""
  }
}

Form Errors:

{}

Advanced Validation Example

A form showcasing custom validators and dynamic field validation rules. Demonstrates complex validation patterns like conditional requirements and field matching.

Custom Validator Registration

1// Register custom validators
2useEffect(() => {
3  // Register requiredIf validator
4  methods.registerValidator('requiredIf', (value, context) => {
5    const { dependsOn, dependsOnValue } = context.field.validation.dynamicValidatorParams || {};
6    
7    if (dependsOn) {
8      // Get the value of the field this field depends on
9      const stepId = context.field.stepId;
10      const dependentValue = context.formData[stepId][dependsOn];
11      
12      // Check if the condition is met
13      if (dependentValue === dependsOnValue) {
14        // Field is required
15        if (!value) {
16          return `${context.field.label} is required when subscribed`;
17        }
18      }
19    }
20    
21    return true; // validation passes
22  });
23  
24  // Register equals validator
25  methods.registerValidator('equals', (value, context) => {
26    const { matchField, errorMessage } = context.field.validation.dynamicValidatorParams || {};
27    
28    if (matchField) {
29      const stepId = context.field.stepId;
30      const fieldToMatch = context.formData[stepId][matchField];
31      
32      if (value !== fieldToMatch) {
33        return errorMessage || `${context.field.label} must match ${matchField}`;
34      }
35    }
36    
37    return true; // validation passes
38  });
39  
40  // Cleanup validators when component unmounts
41  return () => {
42    methods.unregisterValidator('requiredIf');
43    methods.unregisterValidator('equals');
44  };
45}, [methods]);

Dynamic Field Configuration

Configure fields with dynamic validation rules:

1const formConfig = {
2  steps: [
3    {
4      id: 'contact',
5      title: 'Contact Information',
6      fields: {
7        // Other fields...
8        subscribe: {
9          id: 'subscribe',
10          value: false,
11          label: 'Subscribe to newsletter',
12          type: 'checkbox',
13        },
14        phoneNumber: {
15          id: 'phoneNumber',
16          value: '',
17          label: 'Phone Number',
18          type: 'tel',
19          validation: {
20            dynamicValidator: 'requiredIf',
21            dynamicValidatorParams: {
22              dependsOn: 'subscribe',
23              dependsOnValue: true
24            }
25          }
26        },
27        password: {
28          id: 'password',
29          value: '',
30          label: 'Password',
31          type: 'password',
32          required: true,
33        },
34        confirmPassword: {
35          id: 'confirmPassword',
36          value: '',
37          label: 'Confirm Password',
38          type: 'password',
39          required: true,
40          validation: {
41            dynamicValidator: 'equals',
42            dynamicValidatorParams: {
43              matchField: 'password',
44              errorMessage: 'Passwords must match'
45            }
46          }
47        }
48      }
49    }
50  ]
51};

Conditional UI Rendering

Update UI based on dynamic validation state:

1// Render phone number field with conditional requirement
2<div className="form-field">
3  <label>
4    Phone Number {state.formData.contact?.subscribe && <span className="required">*</span>}
5  </label>
6  <input
7    type="tel"
8    value={state.formData.contact?.phoneNumber || ''}
9    onChange={(e) => methods.updateField('contact', 'phoneNumber', e.target.value)}
10  />
11  {state.fieldErrors.contact?.phoneNumber && (
12    <div className="error">{state.fieldErrors.contact.phoneNumber}</div>
13  )}
14</div>
15
16// Subscription checkbox that affects other fields
17<div className="form-field checkbox">
18  <input
19    type="checkbox"
20    id="subscribe"
21    checked={!!state.formData.contact?.subscribe}
22    onChange={(e) => methods.updateField('contact', 'subscribe', e.target.checked)}
23  />
24  <label htmlFor="subscribe">Subscribe to newsletter</label>
25</div>

Custom Validation Features

This advanced validation example demonstrates:

Conditional field requirements based on other field values
Field matching validation (password confirmation)
Custom validator registration using Form Controller API
Dynamic error messages based on validation context
Real-time validation feedback

Implementation Highlights: Uses registerValidator to define custom validation rules. Implements requiredIf validator for conditional field requirements. Implements equals validator for field matching validation. Uses dynamicValidatorParams to configure validation behavior. Demonstrates accessing validation context to create interdependent field validation.

Complete Code Example

Advanced Validation Example

1import React, { useEffect } from "react";
2import { useUplink } from " @uplink-protocol/react";
3import { FormController } from "@uplink-protocol/form-controller";
4
5// Typescript interfaces for the validator context
6interface ValidationContext {
7  field: {
8    id: string;
9    label: string;
10    stepId: string;
11    validation: {
12      dynamicValidatorParams?: {
13        dependsOn?: string;
14        dependsOnValue?: unknown;
15        matchField?: string;
16        errorMessage?: string;
17      };
18    };
19  };
20  formData: {
21    [stepId: string]: {
22      [fieldId: string]: unknown;
23    };
24  };
25}
26
27function AdvancedValidationForm() {
28  // Define your form configuration
29  const formConfig = {
30    steps: [
31      {
32        id: 'contact',
33        title: 'Contact Information',
34        fields: {
35          name: {
36            id: 'name',
37            value: '',
38            label: 'Full Name',
39            type: 'text',
40            required: true,
41          },
42          email: {
43            id: 'email',
44            value: '',
45            label: 'Email Address',
46            type: 'email',
47            required: true,
48            validation: {
49              pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
50            }
51          },
52          subscribe: {
53            id: 'subscribe',
54            value: false,
55            label: 'Subscribe to newsletter',
56            type: 'checkbox',
57          },
58          phoneNumber: {
59            id: 'phoneNumber',
60            value: '',
61            label: 'Phone Number',
62            type: 'tel',
63            validation: {
64              dynamicValidator: 'requiredIf',
65              dynamicValidatorParams: {
66                dependsOn: 'subscribe',
67                dependsOnValue: true
68              }
69            }
70          },
71          password: {
72            id: 'password',
73            value: '',
74            label: 'Password',
75            type: 'password',
76            required: true,
77          },
78          confirmPassword: {
79            id: 'confirmPassword',
80            value: '',
81            label: 'Confirm Password',
82            type: 'password',
83            required: true,
84            validation: {
85              dynamicValidator: 'equals',
86              dynamicValidatorParams: {
87                matchField: 'password',
88                errorMessage: 'Passwords must match'
89              }
90            }
91          }
92        }
93      }
94    ]
95  };
96
97  // Initialize the form controller
98  const { state, methods } = useUplink(
99    () => FormController(formConfig),
100    { trackBindings: "all" }
101  );
102
103  // Register custom validators
104  useEffect(() => {
105    // Register requiredIf validator
106    methods.registerValidator('requiredIf', (value, context) => {
107      const { dependsOn, dependsOnValue } = context.field.validation.dynamicValidatorParams || {};
108      
109      if (dependsOn) {
110        // Get the value of the field this field depends on
111        const stepId = context.field.stepId;
112        const dependentValue = context.formData[stepId][dependsOn];
113        
114        // Check if the condition is met
115        if (dependentValue === dependsOnValue) {
116          // Field is required
117          if (!value) {
118            return `${context.field.label} is required when subscribed`;
119          }
120        }
121      }
122      
123      return true; // validation passes
124    });
125    
126    // Register equals validator
127    methods.registerValidator('equals', (value, context) => {
128      const { matchField, errorMessage } = context.field.validation.dynamicValidatorParams || {};
129      
130      if (matchField) {
131        const stepId = context.field.stepId;
132        const fieldToMatch = context.formData[stepId][matchField];
133        
134        if (value !== fieldToMatch) {
135          return errorMessage || `${context.field.label} must match ${matchField}`;
136        }
137      }
138      
139      return true; // validation passes
140    });
141    
142    // Cleanup validators when component unmounts
143    return () => {
144      methods.unregisterValidator('requiredIf');
145      methods.unregisterValidator('equals');
146    };
147  }, [methods]);
148
149  // Handle form submission
150  const handleSubmit = (e) => {
151    e.preventDefault();
152    const result = methods.submitForm();
153
154    if (result.success) {
155      console.log('Form data:', result.data);
156      alert("Form submitted successfully!");
157    } else {
158      alert("Please fix the errors before submitting.");
159    }
160  };
161
162  return (
163    <form onSubmit={handleSubmit}>
164      <div className="form-field">
165        <label>
166          Full Name <span className="required">*</span>
167        </label>
168        <input
169          type="text"
170          value={state.formData.contact?.name || ''}
171          onChange={(e) => methods.updateField('contact', 'name', e.target.value)}
172        />
173        {state.fieldErrors.contact?.name && (
174          <div className="error">{state.fieldErrors.contact.name}</div>
175        )}
176      </div>
177
178      <div className="form-field">
179        <label>
180          Email <span className="required">*</span>
181        </label>
182        <input
183          type="email"
184          value={state.formData.contact?.email || ''}
185          onChange={(e) => methods.updateField('contact', 'email', e.target.value)}
186        />
187        {state.fieldErrors.contact?.email && (
188          <div className="error">{state.fieldErrors.contact.email}</div>
189        )}
190      </div>
191
192      <div className="form-field checkbox">
193        <input
194          type="checkbox"
195          id="subscribe"
196          checked={!!state.formData.contact?.subscribe}
197          onChange={(e) => methods.updateField('contact', 'subscribe', e.target.checked)}
198        />
199        <label htmlFor="subscribe">Subscribe to newsletter</label>
200      </div>
201
202      <div className="form-field">
203        <label>
204          Phone Number {state.formData.contact?.subscribe && <span className="required">*</span>}
205        </label>
206        <input
207          type="tel"
208          value={state.formData.contact?.phoneNumber || ''}
209          onChange={(e) => methods.updateField('contact', 'phoneNumber', e.target.value)}
210        />
211        {state.fieldErrors.contact?.phoneNumber && (
212          <div className="error">{state.fieldErrors.contact.phoneNumber}</div>
213        )}
214      </div>
215
216      <div className="form-field">
217        <label>
218          Password <span className="required">*</span>
219        </label>
220        <input
221          type="password"
222          value={state.formData.contact?.password || ''}
223          onChange={(e) => methods.updateField('contact', 'password', e.target.value)}
224        />
225        {state.fieldErrors.contact?.password && (
226          <div className="error">{state.fieldErrors.contact.password}</div>
227        )}
228      </div>
229
230      <div className="form-field">
231        <label>
232          Confirm Password <span className="required">*</span>
233        </label>
234        <input
235          type="password"
236          value={state.formData.contact?.confirmPassword || ''}
237          onChange={(e) => methods.updateField('contact', 'confirmPassword', e.target.value)}
238        />
239        {state.fieldErrors.contact?.confirmPassword && (
240          <div className="error">{state.fieldErrors.contact.confirmPassword}</div>
241        )}
242      </div>
243
244      <button type="submit">Submit</button>
245    </form>
246  );
247}

Custom Validation Features

Conditional field requirements based on other field values
Field matching validation (password confirmation)
Custom validator registration using Form Controller API
Dynamic error messages based on validation context
Real-time validation feedback

Implementation Highlights:

Uses registerValidator to define custom validation rules
Implements requiredIf validator for conditional field requirements
Implements equals validator for field matching validation
Uses dynamicValidatorParams to configure validation behavior
Demonstrates accessing validation context to create interdependent field validation

Uplink Protocol

Form Controller

Examples

Single-Step Form Example

Beginner-friendly example

Debug Information

Single-Step Form Example

Basic Form Setup

Form Component Implementation

Form Submission Handling

Key Benefits

Complete Code Example

About this Example

Multi-Step Form Example

Intermediate example

Debug Information

Advanced Validation Example

Custom Validator Registration

Dynamic Field Configuration

Conditional UI Rendering

Key Benefits

Complete Code Example

Key Features

Implementation Highlights:

Advanced Validation Example

Advanced example

Debug Information

Advanced Validation Example

Custom Validator Registration

Dynamic Field Configuration

Conditional UI Rendering

Custom Validation Features

Complete Code Example

Custom Validation Features

Implementation Highlights:

Related References

Overview

API Reference