ngx-numeric-range-form-field v4.0.0

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-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: INumericRange): 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; // Flag for readonly both controls
@Input() minReadonly = false; // Flag for readonly minimum control
@Input() maxReadonly = false; // Flag for readonly maximum control
@Input() resettable = true; // Flag for resetting controls value
@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() dynamicSyncValidators: ValidatorFn | ValidatorFn[]; // Dynamic change of sync validators

@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<INumericRange>(); // Event which emits when one of range value is changed

It is based on following interface:

export interface INumericRange {
	minimum: number;
	maximum: number;
}

License

Apache License

Copyright (c) 2022 Dino Klicek