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.

Numeric range form field

weekly downloads from npm npm version

Maintenance code style: prettier FOSSA Status

• Two inputs as one field.
• Reactive form field.
• Auto range validation & custom validation.

View live demo on StackBlitz.

npm install ngx-numeric-range-form-field

Template:

<form [formGroup]="form">
 <ngx-numeric-range-form-field
 formControlName="range"
 label="Numeric range"
 (blurred)="onBlur()"
 (enterPressed)="onEnter()"
 (numericRangeChanged)="onNumericRangeChanged($event)"
 ></ngx-numeric-range-form-field>
</form>

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:

type INumericRange = {
 minimum: number;
 maximum: number;
};

• 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.

• blurred

  Emit on blur out.

• enterPressed

  Emit on enter press.

• numericRangeChanged

  Emit on value change.

Contributions are more than welcome!

MIT License

Copyright (c) 2022 Dino Klicek