README

ngx-numeric-range-form-field

An Angular Material UI numeric range input form field. It is based on custom form field control and control value accessor which allows inserting minimum number and maximum number of some range.

Numeric range form field

Feature

Two inputs as one field.
Auto range validation.
Supports reactive forms.

View live demo on StackBlitz.

Install

npm install ngx-numeric-range-form-field

Usage

In component HTML:

<ngx-numeric-range-form-field-container
    [formControl]="rangeControl"
    label="Numeric range"
    (blurred)="onBlur()"
    (enterPressed)="onEnter()"
    (numericRangeChanged)="onValueChange($event)"
></ngx-numeric-range-form-field-container>

In component.ts:

form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            range: new FormControl(null, [
                Validators.required, //optional
                Validators.min(10), //optional
                Validators.max(100), //optional
            ]),
        });
    }

    get rangeControl(): FormControl {
        return this.form.get('range') as FormControl;
    }

    onBlur(): void {
        console.log('Value', this.rangeControl.value);
    }

    onEnter(): void {
        console.log('Enter pressed!');
    }

    onValueChange(value: INumericRange): void {
        console.log('Changed value: ', value);
    }

Customizable input and output decorators:

@Input() label: string; // Label of the control
@Input() appearance: 'legacy' | 'standard' | 'fill' | 'outline' = 'outline';
@Input() floatLabel: 'always' | 'never' | 'auto' = 'always';
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
@Input() readonly = false; // Indicator wether the both controls are readonly
@Input() resettable = true; // Indicator wether the both controls are resettable
@Input() required: boolean; // Required validation
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
@Input() minimumErrorMessage = 'Minimum has been reached!'; // Customizable error message when field has min validation
@Input() maximumErrorMessage = 'Maximum has exceeded!'; // Customizable error message when field has max validation
@Input() invalidRangeErrorMessage = 'Inserted range is not valid!'; // Customizable error message when field has invalid numeric range

@Output() blurred = new EventEmitter<void>(); // Event which emits where user leaves control (focus out)
@Output() enterPressed = new EventEmitter<void>(); // Event which emits when enter is pressed
@Output() numericRangeChanged = new EventEmitter<INumericRange>(); // Event which emits when one of range value is changed

It is based on following interface:

export interface INumericRange {
    minimum: number;
    maximum: number;
}

License

Apache License