A monetary amount input that renders comma thousand-separators on every keystroke (1000000 → "1,000,000"). Use this instead of input type="number" whenever formatted display matters.
Read Form Rules before using this component — keys, labels, required fields, expressions, visibility, and validation all follow shared conventions.
Instead of customcurrencyformatinput, use… |
For… |
|---|---|
input with props.type: "number" |
Plain integers with no formatting requirement |
input |
Non-monetary reference numbers or free-text quantities |
Important: The stored form control value is the formatted string (
"1,000,000"), not the integer1000000. Strip commas before submitting to an API.
| Prop | Type | Required? | Description |
|---|---|---|---|
label |
string |
required | Visible label. Must be unique across the form. |
required |
boolean |
required | Always false. The expression controls the runtime value. |
defaultRequired |
boolean |
required | true for required fields, false for optional ones. |
currencyCode |
string |
optional | Currency code displayed alongside the input (e.g. "RWF"). |
currencyFormatting |
boolean |
optional | Enables comma-formatted display. Defaults to true for this component. |
placeholder |
string |
optional | Ghost text shown inside the input. |
disabled |
boolean |
optional | Disables the field. |
readonly |
boolean |
optional | Renders the field non-editable. Set true for computed/auto-populated amounts. |
hidden |
boolean |
optional | Hides the field via CSS. Prefer expressions.hide or expressions.props.hideField instead. |
hideField |
boolean |
optional | Hides the field and excludes its value. Toggle via expressions["props.hideField"]. |
No
min/maxprops. This component has no built-in range validation. Use custom formly validators if range constraints are needed.
{
"key": "VEHICLE_VALUE",
"type": "customcurrencyformatinput",
"props": {
"label": "Vehicle Value",
"required": false,
"defaultRequired": true,
"placeholder": "Enter vehicle value",
"currencyCode": "RWF",
"currencyFormatting": true
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {
"required": "Vehicle value is required"
}
}
}
{
"key": "NET_PREMIUM",
"type": "customcurrencyformatinput",
"props": {
"label": "Net Premium",
"required": false,
"defaultRequired": false,
"readonly": true,
"currencyCode": "RWF",
"currencyFormatting": true
},
"expressions": {
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {}
}
}
{
"key": "INSTALLMENT_AMOUNT",
"type": "customcurrencyformatinput",
"props": {
"label": "First Installment Amount",
"required": false,
"defaultRequired": false,
"readonly": true,
"hideField": true,
"currencyCode": "RWF",
"currencyFormatting": true
},
"expressions": {
"hide": "!model?.PAYMENT_PLAN || model?.PAYMENT_PLAN !== 'INSTALLMENTS'",
"props.hideField": "!model?.PAYMENT_PLAN || model?.PAYMENT_PLAN !== 'INSTALLMENTS'",
"props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired"
},
"validation": {
"messages": {}
}
}
"1,000,000", not 1000000. Strip commas (value.replace(/,/g, '')) before sending to an API.props.min or props.max — these props are not read by the component and have no effect.props.locale — this component has no locale support. Use props.currencyCode for the currency symbol.props.hidden: true statically — the field is permanently hidden. Use expressions.hide or expressions.props.hideField instead.input type="number" when formatted display is needed — plain input stores a raw number without comma formatting.key is UPPER_SNAKE_CASE and unique across the entire formprops.label is present, unique, and correctly casedsections > formly-group > block > customcurrencyformatinputrequired: false (never true)defaultRequired is setexpressions["props.required"] is presentcurrencyCode and currencyFormatting are set