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.

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 value for predefined MatFormFieldAppearance constants.

• 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