https://github.com/dineeek/ngx-numeric-range-form-field
Angular Material UI numeric range input form field. It is based on control value accessor.
https://github.com/dineeek/ngx-numeric-range-form-field
angular cva form form-validation forms input range
Last synced: about 2 months ago
JSON representation
Angular Material UI numeric range input form field. It is based on control value accessor.
- Host: GitHub
- URL: https://github.com/dineeek/ngx-numeric-range-form-field
- Owner: dineeek
- License: apache-2.0
- Created: 2021-08-14T12:58:15.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-21T10:20:45.000Z (about 1 year ago)
- Last Synced: 2025-03-30T02:51:08.979Z (3 months ago)
- Topics: angular, cva, form, form-validation, forms, input, range
- Language: TypeScript
- Homepage:
- Size: 1.18 MB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-numeric-range-form-field - Angular Material UI numeric range input form field. It is based on control value accessor. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-numeric-range-form-field - Angular Material UI numeric range input form field. It is based on control value accessor. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-numeric-range-form-field - Angular Material UI numeric range input form field. It is based on control value accessor. (Table of contents / Third Party Components)
README
# ngx-numeric-range-form-field
An Angular Material UI numeric range input form field. Implementation is based on custom form field and control value accessor which allows inserting range numbers - minimum and maximum.
[](https://GitHub.com/Naereen/StrapDown.js/graphs/commit-activity)
[](https://github.com/prettier/prettier)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fdineeek%2Fngx-numeric-range-form-field?ref=badge_shield)
# Feature
- Two inputs as one field.
- Reactive form field.
- Auto range validation & custom validation.
**[View live demo on StackBlitz.](https://ngx-numeric-range-form-field.stackblitz.io)**
# Install
```shell
npm install ngx-numeric-range-form-field
```
# Usage
Template:
```html
```
```typescript
form: FormGroup;
constructor() {
this.form = new FormGroup({
range: new FormControl({
minimum: 10,
maximum: 100,
}, [
Validators.required, //optional
Validators.min(10), //optional
Validators.max(100), //optional
]),
});
}
onBlur(): void {
console.log('Value', this.rangeControl.value);
}
onEnter(): void {
console.log('Enter pressed!');
}
onNumericRangeChanged(value: INumericRange): void {
console.log('Changed value: ', value);
}
```
It is based on following type:
```typescript
type INumericRange = {
minimum: number;
maximum: number;
};
```
### Input property decorators:
- #### label
Set label of the field.
- #### appearance
Set MatFormFieldAppearance.
- #### floatLabel
Set FloatLabelType.
- #### minPlaceholder & maxPlaceholder
Set placeholder of the minimum value control. Defaulted to 'From'.
Set placeholder of the maximum value control. Defaulted to 'To'.
- #### readonly
Set field value as readonly.
- #### minReadonly & maxReadonly
Set flag for separated readonly value.
- #### resettable
Set showing icon for resetting value in field.
- #### requiredErrorMessage
Set error message on required validation.
- #### minimumErrorMessage & maximumErrorMessage
Set error message on min & max value validation.
- #### maximumErrorMessage
Set error message on min value validation.
- #### invalidRangeErrorMessage
Set error message on invalid numeric range.
- #### dynamicSyncValidators
Set sync validators on runtime.
### Output property decorators:
- #### blurred
Emit on blur out.
- #### enterPressed
Emit on enter press.
- #### numericRangeChanged
Emit on value change.
# Contributing
Contributions are more than welcome!
# License
MIT License
Copyright (c) 2022 Dino Klicek