rxweb: NumericValidator - differentiate errors for allowDecimal true/false
Describe the bug
Using a NumericValidator on two controls is an issue if one allows decimals and one forbids them, since the NumericValidator will set the error numeric to false if the value is invalid.
Assuming we create a FormGroup with a height and a age control:
height: [
'',
RxwebValidators.numeric({
acceptValue: NumericValueType.PositiveNumber,
allowDecimal: true
})
],
age: [
'',
RxwebValidators.numeric({
acceptValue: NumericValueType.PositiveNumber,
allowDecimal: false
})
]
And we translate the numeric error message as Must be a valid number this would make sense if the user enters any non-numeric values to the input.
But as soon as the user enters a decimal value to the age the control will get a translated error message Must be a valid number displayed.
Translating the error message to Can't be a decimal doesn’t make sense since as soon as the user enters non-numeric values any of those controls it wouldn’t match the input.
Expected Behavior
Differentiate the numeric error to a decimal and non decimal error.
If allowDecimal is true, change the key to numericDecimal, else leave it as numeric or rename it to numericInteger.
Other option would be to allow a custom message per Validation. There is a message parameter but it doesn’t seem to have any impact on the error message.
height: [
'',
RxwebValidators.numeric({
acceptValue: NumericValueType.PositiveNumber,
allowDecimal: true,
message: 'mustBeADecimal'
})
],
age: [
'',
RxwebValidators.numeric({
acceptValue: NumericValueType.PositiveNumber,
allowDecimal: false,
message: 'mustBeAnInteger'
})
]
Package Version
@rxweb/reactive-form-validators@1.9.8
Browser
Firefox 75.0
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 19 (10 by maintainers)
@hoang-innomizetech I will check and let you know in two hours, As I am in between something to releasing translation package.
@ChrisKaun I try to accommodate multilingual error messages as per your case with the lib. Please refer to the stackblitz example: https://stackblitz.com/edit/rxweb-numeric-message-key-example?file=src%2Fapp%2Fapp.component.ts