Preloaded Disabled Number field validation error

[MoeHamdan]

Describe the bug
When loading a form that has preloaded data into disabled number field, and that field is marked as required. The validation will still show the field is required to be filled, though it has a value. Looking at form instance data I noticed that because the value is string (i.e "123" and not 123) the validation is not working correctly.

Version/Branch
@formio/js 5.2.3

To Reproduce
Steps to reproduce the behavior:

1. Create form...
2. Add number component...
3. Mark the component as required and disabled
4. Set API attributes so it pre-loads the data from API for instance
5. Open the form it should load the data into the number component
6. Try submit the validation will kick in and shows validation error thus preventing submission

Expected behavior
Since the number component is already loaded it should just work just fine.

Screenshots

[MoeHamdan]

In order to workaround it I had to implement this plugin. I hope it helps.

import { Formio } from '@formio/js'

/**
 * Plugin to fix Form.io number validation type mismatch
 * 
 * Bug: FormIO's number validation in @formio/core fails when values are numeric strings 
 *      (e.g., "105525" instead of 105525) because it does strict type checking:
 *      `if (value && typeof value !== 'number') return error;`
 * 
 * This commonly happens with:
 *   - Prefilled/autofilled data from APIs
 *   - Data loaded from IndexedDB/localStorage
 *   - Query parameter values
 *   - Disabled fields with pre-populated values
 * 
 * Fix: Override the Number component to convert string values to numbers before validation
 */
const numberValidationPlugin = {
  priority: 0, // Run early
  
  init: function() {
    const Components = Formio.Components;
    
    if (!Components || !Components.components || !Components.components.number) {
      console.warn('FormIO Number component not found, skipping number validation fix');
      return;
    }
    
    const NumberComponent = Components.components.number;
    
    // Store original normalizeValue method
    const originalNormalizeValue = NumberComponent.prototype.normalizeValue;
    
    // Override normalizeValue to convert strings to numbers
    NumberComponent.prototype.normalizeValue = function(value) {
      // Convert string numbers to actual numbers before normal processing
      if (typeof value === 'string' && value !== '') {
        const trimmed = value.trim();
        if (trimmed !== '') {
          // Handle the component's decimal separator if present
          let parseValue = trimmed;
          if (this.decimalSeparator && this.decimalSeparator !== '.') {
            parseValue = trimmed.replace(this.decimalSeparator, '.');
          }
          if (this.delimiter) {
            parseValue = parseValue.split(this.delimiter).join('');
          }
          const parsed = Number(parseValue);
          if (!isNaN(parsed) && isFinite(parsed)) {
            value = parsed;
          }
        }
      }
      
      // Call original normalizeValue
      return originalNormalizeValue ? originalNormalizeValue.call(this, value) : value;
    };
    
    // Also override setValue to ensure values are normalized on set
    const originalSetValue = NumberComponent.prototype.setValue;
    NumberComponent.prototype.setValue = function(value, flags = {}) {
      // Normalize string numbers before setting
      if (typeof value === 'string' && value !== '') {
        const trimmed = value.trim();
        if (trimmed !== '') {
          let parseValue = trimmed;
          if (this.decimalSeparator && this.decimalSeparator !== '.') {
            parseValue = trimmed.replace(this.decimalSeparator, '.');
          }
          if (this.delimiter) {
            parseValue = parseValue.split(this.delimiter).join('');
          }
          const parsed = Number(parseValue);
          if (!isNaN(parsed) && isFinite(parsed)) {
            value = parsed;
          }
        }
      }
      return originalSetValue.call(this, value, flags);
    };
    
    console.log('FormIO number validation plugin initialized - overriding Number component');
  }
}

export default {
  install: () => {
    Formio.registerPlugin(numberValidationPlugin, 'numberValidationPlugin');
  }
}