ngx-numeric-range-form-field

An Angular Material UI numeric range input form field. It is based on custom form field control and control value accessor which allows inserting range numbers, minimum and maximum.

!Numeric range form field


Feature

- Two inputs as one field.
- Auto range validation.
- Supports reactive forms.

View live demo on StackBlitz.

Install

``shell
npm install ngx-custom-numeric-range-form-field
`

Usage

In component HTML:

`html
[formControl]="rangeControl"
label="Numeric range"
(blurred)="onBlur()"
(enterPressed)="onEnter()"
(numericRangeChanged)="onValueChange($event)"
>
`

In component.ts:

`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
]),
});
}

get rangeControl(): FormControl {
return this.form.get('range') as FormControl;
}

onBlur(): void {
console.log('Value', this.rangeControl.value);
}

onEnter(): void {
console.log('Enter pressed!');
}

onValueChange(value: any): void {
console.log('Changed value: ', value);
}
`

Customizable input and output decorators:

`typescript
@Input() label: string; // Label of the control
@Input() appearance: 'legacy' | 'standard' | 'fill' | 'outline' = 'outline';
@Input() floatLabel: 'always' | 'never' | 'auto' = 'always';
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
@Input() readonly = false; // Indicator wether the both controls are readonly
@Input() minReadonly = false; // Indicator wether the minimum control is readonly
@Input() maxReadonly = false; // Indicator wether the maximum control is readonly
@Input() resettable = true; // Indicator wether the both controls are resettable
@Input() required: boolean; // Required validation
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
@Input() minimumErrorMessage = 'Minimum has been reached!'; // Customizable error message when field has min validation
@Input() maximumErrorMessage = 'Maximum has exceeded!'; // Customizable error message when field has max validation
@Input() invalidRangeErrorMessage = 'Inserted range is not valid!'; // Customizable error message when field has invalid numeric range
@Input() minimumControlName = 'minimum'; // Customizable minimum control name
@Input() maximumControlName = 'maximum'; // Customizable maximum control name
@Input() updateOn: 'change' | 'blur' | 'submit' = 'change'; // The event name for control to update upon
@Input() controlStyle = ''; // Custom control style

@Output() blurred = new EventEmitter(); // Event which emits where user leaves control (focus out)
@Output() enterPressed = new EventEmitter(); // Event which emits when enter is pressed
@Output() numericRangeChanged = new EventEmitter(); // Event which emits when one of range value is changed
``

License

Apache License

Copyright (c) 2022 Dino Klicek, Edited by Oubayda Khayata