Awesome

ngx-numeric-range-form-field

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.

Feature

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

View live demo on StackBlitz.

Install

npm install ngx-numeric-range-form-field

Usage

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;
};

Input property decorators:

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

Output property decorators:

• blurred

  Emit on blur out.

• enterPressed

  Emit on enter press.

• numericRangeChanged

  Emit on value change.

Contributing

Contributions are more than welcome!

License

MIT License

Copyright (c) 2022 Dino Klicek