ngx-custom-numeric-range-form-field
v2.4.0
Published
Angular material numeric range form field
Downloads
3
Maintainers
Readme
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.
Feature
- Two inputs as one field.
- Auto range validation.
- Supports reactive forms.
Install
npm install ngx-custom-numeric-range-form-field
Usage
In component HTML:
<ngx-numeric-range-form-field
[formControl]="rangeControl"
label="Numeric range"
(blurred)="onBlur()"
(enterPressed)="onEnter()"
(numericRangeChanged)="onValueChange($event)"
></ngx-numeric-range-form-field>
In component.ts:
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:
@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<void>(); // Event which emits where user leaves control (focus out)
@Output() enterPressed = new EventEmitter<void>(); // Event which emits when enter is pressed
@Output() numericRangeChanged = new EventEmitter<any>(); // Event which emits when one of range value is changed
License
Apache License
Copyright (c) 2022 Dino Klicek, Edited by Oubayda Khayata