dotnet/aspnetcore · error · Error
Invalid number value '${attributeValue}' for parameter '${pa
Error message
Invalid number value '${attributeValue}' for parameter '${parameterName}' What it means
Thrown by parseAttributeValue in the 'number' case when Number(attributeValue) returns NaN. Custom elements can only receive primitives via attributes; numeric parameters must be parseable by JavaScript's Number() constructor.
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 294cab2f9b)
Solutions
- Ensure the attribute value is a valid numeric literal that Number() accepts (e.g. '42', '3.14', '-1').
- Declare the parameter as 'number?' if an empty/null representation is needed (empty string yields null, not a throw).
- Set the value as a JS property to bypass string parsing: element.count = 42;
- Sanitize/format the value in your templating/binding layer before emitting it as an attribute.
Example fix
// before <my-grid page-size="1,000"></my-grid> // after <my-grid page-size="1000"></my-grid>
Defensive patterns
Strategy: validation
Validate before calling
function isValidNumberAttr(v: string): boolean {
return v.trim() !== '' && !Number.isNaN(Number(v));
}
if (!isValidNumberAttr(raw)) {
throw new Error(`Refusing to set non-numeric attribute: ${raw}`);
}
el.setAttribute('count', raw); Type guard
function asNumberAttr(v: unknown): number | null {
if (typeof v !== 'string' || v.trim() === '') return null;
const n = Number(v);
return Number.isNaN(n) ? null : n;
} Try / catch
try {
el.setAttribute('count', raw);
} catch (e) {
if (/Invalid number value/.test((e as Error).message)) {
el.count = Number(raw.replace(/[^0-9.\-]/g, '')) || 0; // fallback via property
} else throw e;
} Prevention
- Strip thousands separators and units before emitting numeric attributes.
- Use 'number?' for optional numeric parameters to allow empty/null.
- Set numbers via the JS property to avoid string parsing.
- Validate with Number.isNaN(Number(value)) in your binding layer.
When it happens
Trigger: Setting a numeric [Parameter] via an HTML attribute with a non-numeric value: <my-component count="abc"/>, count="12px", count="1.2.3", or count="" (for a non-nullable number). The empty string for a non-nullable number parses to 0 normally, but values like '' actually pass Number('')===0; the failing cases are genuinely non-numeric like 'abc'.
Common situations: Templating engines interpolating a non-number variable, localized number formats with commas ('1,000'), units appended ('5px'), or passing a number-like object's toString() that is not a clean number.
Related errors
- Invalid boolean value '${attributeValue}' for parameter '${p
- The parameter '${parameterName}' accepts a complex-typed obj
- Unknown type '${type}' for parameter '${parameterName}'
- Error parsing the sequence '${sequence}' for component '${JS
- Unknown passkey operation '${this.attrs.operation}'.
AI-assisted analysis of dotnet/aspnetcore@294cab2f9b (2026-08-06).
Data as JSON: /api/errors/659c8301a10523a0.
Report an issue: GitHub.