dotnet/aspnetcore · error · Error

Invalid number value

Error message

Invalid number value '${attributeValue}' for parameter '${parameterName}'

What it means

Thrown by parseAttributeValue when an attribute declared as type 'number' cannot be coerced via Number() — i.e. Number(attributeValue) returns NaN. Only strings that JavaScript's Number() can parse (e.g. '42', '3.14', '0x10', '1e3') are accepted; anything else aborts parameter application.

Solutions

Ensure the attribute string is a JavaScript-parseable number (no thousands separators, '.' as decimal point).
Pre-coerce the value before setting the attribute: String(Number(rawValue)) or a sanitization step.
Use a 'number?' parameter if an empty/unset value is valid so empty maps to null instead of throwing.
Strip non-numeric characters (commas, currency symbols) before assignment.

Example fix

// before
el.setAttribute('count', '1,000'); // throws

// after
el.setAttribute('count', String(Number(raw.replace(/[^0-9.]/g, ''))));

Defensive patterns

Strategy: validation

Validate before calling

// Validate/coerce numeric attribute strings before assignment.
function toNumberAttr(value) {
  const cleaned = String(value).replace(/[^0-9.\-eE]/g, '');
  const n = Number(cleaned);
  if (Number.isNaN(n)) throw new Error(`Not a number: ${value}`);
  return String(n);
}
el.setAttribute('count', toNumberAttr(rawValue));

Type guard

function isValidNumberAttr(v) {
  return v !== '' && v != null && !Number.isNaN(Number(v));
}

Try / catch

try {
  el.setAttribute('count', raw);
} catch (e) {
  if (/Invalid number value/.test(e.message)) {
    el.setAttribute('count', String(Number(raw.replace(/[^0-9.\-]/g, '')) || 0));
  } else throw e;
}

Prevention

Strip thousands separators and currency symbols before assignment.
Use 'number?' for nullable numeric parameters so empty maps to null.
Validate user input as a number before binding to a numeric attribute.
Localize decimal display only after coercion, not at the attribute layer.

When it happens

Trigger: Setting a numeric [Parameter] via an HTML attribute with a non-numeric string: '', 'abc', 'N/A', '1,000' (comma), localized decimals using comma as separator, or trailing whitespace that Number() rejects.

Common situations: Localization where thousands/decimal separators differ; binding a string UI field directly to a numeric parameter without coercion; empty default attributes; copying values from labels rather than inputs.

Related errors

AI-assisted analysis of dotnet/aspnetcore@3600ca084e (2026-08-11). Data as JSON: /api/errors/659c8301a10523a0. Report an issue: GitHub.

Appendix: source

Thrown at src/Components/CustomElements/src/js/BlazorCustomElements.ts:125

  static parseAttributeValue(attributeValue: string, type: JSComponentParameterType, parameterName: string): any {
    switch (type) {
      case 'string':
        return attributeValue;
      case 'boolean':
        switch (attributeValue) {
          case 'true':
          case 'True':
            return true;
          case 'false':
          case 'False':
            return false;
          default:
            throw new Error(`Invalid boolean value '${attributeValue}' for parameter '${parameterName}'`);
        }
      case 'number':
        const number = Number(attributeValue);
        if (Number.isNaN(number)) {
          throw new Error(`Invalid number value '${attributeValue}' for parameter '${parameterName}'`);
        } else {
          return number;
        }
      case 'boolean?':
        return attributeValue ? BlazorCustomElement.parseAttributeValue(attributeValue, 'boolean', parameterName) : null;
      case 'number?':
        return attributeValue ? BlazorCustomElement.parseAttributeValue(attributeValue, 'number', parameterName) : null;
      case 'object':
        throw new Error(`The parameter '${parameterName}' accepts a complex-typed object so it cannot be set using an attribute. Try setting it as a element property instead.`);
      default:
        throw new Error(`Unknown type '${type}' for parameter '${parameterName}'`);
    }
  }
}

function dasherize(value: string): string {
  return camelCase(value).replace(/([A-Z])/g, "-$1").toLowerCase();
}

View on GitHub (pinned to 3600ca084e)