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

Aam-Digital/ngx-numeric-range-form-field

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 76.7%
  • HTML 12.2%
  • JavaScript 9.3%
  • SCSS 1.8%