Dynamic Fields

Ctrovalidate provides methods to manage the lifecycle of form fields that are added or removed from the DOM after initial controller initialization.

Technical Lifecycle Methods

addField(element: HTMLElement)

Registers a new input for validation tracking.

Behavior:

• Scans for data-ctrovalidate-rules and schema-based rules.
• Attaches event listeners if realTime is enabled for the instance.
• Prevents duplicate registration if the element is already tracked.

const input = document.createElement('input');
input.name = 'new_field';
input.setAttribute('data-ctrovalidate-rules', 'required');
 
container.appendChild(input);
validator.addField(input);

removeField(element: HTMLElement)

Unregisters an input and cleans up all associated resources.

Behavior:

• Removes blur and input listeners.
• Clears internal references to the field state.
• Automatically removes dependency links if the field was a controller for others.

const field = document.querySelector('[name="obsolete_field"]');
validator.removeField(field);
field.remove();

refresh()

Re-scans the entire form container to synchronize the field list with the current DOM state.

Behavior:

• Clears all tracked fields and re-discovers from scratch.
• Scans for data-ctrovalidate-rules attributes and schema-based fields.
• Attaches listeners to all discovered fields.
• Call after dynamically adding or removing fields in bulk.

// Bulk DOM update
container.innerHTML = `<input name="f1" data-ctrovalidate-rules="required">`;
validator.refresh();

Framework Lifecycle Sync

When using reactive frameworks, triggers methods within component lifecycle hooks to maintain synchronization.

React

useEffect(() => {
  // Sync on mount or dependency change
  validator.refresh();
  return () => validator.destroy();
}, [dependencies]);

Vue

onMounted(() => {
  const validator = new Ctrovalidate(formRef.value);
});
 
// Sync after DOM updates
watch(items, async () => {
  await nextTick();
  validator.refresh();
});

Implementation Guidelines

1. DOM Priority: Always modify the DOM before calling addField or refresh.
2. Explicit Cleanup: Use removeField before removing elements from the DOM to ensure event listeners are detached correctly.
3. Bulk Updates: Use refresh() when multiple fields are modified simultaneously to avoid redundant discovery cycles.

Next Steps

• API Reference — Full documentation of all 9 controller methods.
• **Custom Rules** — Defining custom logic for dynamic inputs.