ngx-custom-numeric-range-form-field

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.

View live demo on StackBlitz.

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