Skip to content

Angular Material UI numeric range input form field. It is based on control value accessor.

License

Notifications You must be signed in to change notification settings

dineeek/ngx-numeric-range-form-field

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Numeric range form field

weekly downloads from npm npm version

Maintenance code style: prettier FOSSA Status

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