Skip to content

Commit eb99a7d

Browse files
dineeekdineeek
committed
Fix installing problems
1 parent 10dca92 commit eb99a7d

File tree

5 files changed

+99
-60
lines changed

5 files changed

+99
-60
lines changed

‎README.md

+87-45
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# ngx-numeric-range-form-field
22

3-
An Angular Material UI numeric range input form field. It is based on custom form field control and control value accessor which allows inserting range numbers, minimum and maximum.
3+
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.
44

55
![Numeric range form field](https://github.com/dineeek/ngx-numeric-range-form-field/blob/main/ngx-numeric-range-form-field/Numeric%20Range%20Form%20Field.png)
66

@@ -16,8 +16,8 @@ An Angular Material UI numeric range input form field. It is based on custom for
1616
# Feature
1717

1818
- Two inputs as one field.
19-
- Auto range validation.
20-
- Supports reactive forms.
19+
- Reactive form field.
20+
- Auto range validation & custom validation.
2121

2222
**[View live demo on StackBlitz.](https://ngx-numeric-range-form-field.stackblitz.io)**
2323

@@ -29,20 +29,20 @@ npm install ngx-numeric-range-form-field
2929

3030
# Usage
3131

32-
In component HTML:
32+
Template:
3333

3434
```html
35-
<ngx-numeric-range-form-field
36-
[formControl]="rangeControl"
37-
label="Numeric range"
38-
(blurred)="onBlur()"
39-
(enterPressed)="onEnter()"
40-
(numericRangeChanged)="onValueChange($event)"
41-
></ngx-numeric-range-form-field>
35+
<form [formGroup]="form">
36+
<ngx-numeric-range-form-field
37+
formControlName="range"
38+
label="Numeric range"
39+
(blurred)="onBlur()"
40+
(enterPressed)="onEnter()"
41+
(numericRangeChanged)="onNumericRangeChanged($event)"
42+
></ngx-numeric-range-form-field>
43+
</form>
4244
```
4345

44-
In component.ts:
45-
4646
```typescript
4747
form: FormGroup;
4848

@@ -59,10 +59,6 @@ form: FormGroup;
5959
});
6060
}
6161

62-
get rangeControl(): FormControl {
63-
return this.form.get('range') as FormControl;
64-
}
65-
6662
onBlur(): void {
6763
console.log('Value', this.rangeControl.value);
6864
}
@@ -71,45 +67,91 @@ form: FormGroup;
7167
console.log('Enter pressed!');
7268
}
7369

74-
onValueChange(value: INumericRange): void {
70+
onNumericRangeChanged(value: INumericRange): void {
7571
console.log('Changed value: ', value);
7672
}
7773
```
7874

79-
Customizable input and output decorators:
75+
It is based on following type:
8076

8177
```typescript
82-
@Input() label: string; // Label of the control
83-
@Input() appearance: 'legacy' | 'standard' | 'fill' | 'outline' = 'outline';
84-
@Input() floatLabel: 'always' | 'never' | 'auto' = 'always';
85-
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
86-
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
87-
@Input() readonly = false; // Flag for readonly both controls
88-
@Input() minReadonly = false; // Flag for readonly minimum control
89-
@Input() maxReadonly = false; // Flag for readonly maximum control
90-
@Input() resettable = true; // Flag for resetting controls value
91-
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
92-
@Input() minimumErrorMessage = 'Minimum has been reached!'; // Customizable error message when field has min validation
93-
@Input() maximumErrorMessage = 'Maximum has exceeded!'; // Customizable error message when field has max validation
94-
@Input() invalidRangeErrorMessage = 'Inserted range is not valid!'; // Customizable error message when field has invalid numeric range
95-
@Input() dynamicSyncValidators: ValidatorFn | ValidatorFn[]; // Dynamic change of sync validators
96-
97-
@Output() blurred = new EventEmitter<void>(); // Event which emits where user leaves control (focus out)
98-
@Output() enterPressed = new EventEmitter<void>(); // Event which emits when enter is pressed
99-
@Output() numericRangeChanged = new EventEmitter<INumericRange>(); // Event which emits when one of range value is changed
100-
```
101-
102-
It is based on following interface:
103-
104-
```typescript
105-
export interface INumericRange {
78+
type INumericRange = {
10679
minimum: number;
10780
maximum: number;
108-
}
81+
};
10982
```
11083

84+
### Input property decorators:
85+
86+
- #### label
87+
88+
Set label of the field.
89+
90+
- #### appearance
91+
92+
Set MatFormFieldAppearance.
93+
94+
- #### floatLabel
95+
96+
Set FloatLabelType.
97+
98+
- #### minPlaceholder & maxPlaceholder
99+
100+
Set placeholder of the minimum value control. Defaulted to 'From'.
101+
Set placeholder of the maximum value control. Defaulted to 'To'.
102+
103+
- #### readonly
104+
105+
Set field value as readonly.
106+
107+
- #### minReadonly & maxReadonly
108+
109+
Set flag for separated readonly value.
110+
111+
- #### resettable
112+
113+
Set showing icon for resetting value in field.
114+
115+
- #### requiredErrorMessage
116+
117+
Set error message on required validation.
118+
119+
- #### minimumErrorMessage & maximumErrorMessage
120+
121+
Set error message on min & max value validation.
122+
123+
- #### maximumErrorMessage
124+
125+
Set error message on min value validation.
126+
127+
- #### invalidRangeErrorMessage
128+
129+
Set error message on invalid numeric range.
130+
131+
- #### dynamicSyncValidators
132+
133+
Set sync validators on runtime.
134+
135+
### Output property decorators:
136+
137+
- #### blurred
138+
139+
Emit on blur out.
140+
141+
- #### enterPressed
142+
143+
Emit on enter press.
144+
145+
- #### numericRangeChanged
146+
147+
Emit on value change.
148+
149+
# Contributing
150+
151+
Contributions are more than welcome!
152+
111153
# License
112154

113-
Apache License
155+
MIT License
114156

115157
Copyright (c) 2022 Dino Klicek

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field-demo/src/app/app.component.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,9 @@ import {
55
ValidatorFn,
66
Validators,
77
} from '@angular/forms';
8-
import {
9-
FloatLabelType,
10-
MatFormFieldAppearance,
11-
} from '@angular/material/form-field';
128
import { MatSlideToggleChange } from '@angular/material/slide-toggle';
13-
import { INumericRange } from 'projects/ngx-numeric-range-form-field/src/lib/form/model/numeric-range-field.model';
14-
import { combineLatest, merge, Subject, zip } from 'rxjs';
15-
import { startWith, withLatestFrom } from 'rxjs/operators';
9+
import { INumericRange } from 'ngx-numeric-range-form-field';
10+
import { merge, Subject } from 'rxjs';
1611

1712
@Component({
1813
selector: 'app-root',

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1+
### 3.0.1
2+
3+
Fix installing problems.
4+
15
### 3.0.0
26

37
Migrated to Angular 14.
8+
Unpublished due to installing problems.
49

510
### 2.3.0
611

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/ng-package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,5 @@
33
"dest": "../../dist/ngx-numeric-range-form-field",
44
"lib": {
55
"entryFile": "src/public-api.ts"
6-
},
7-
"allowedNonPeerDependencies": ["@angular/forms", "@angular/material"]
6+
}
87
}

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/package.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
{
22
"name": "ngx-numeric-range-form-field",
3-
"version": "3.0.0",
3+
"version": "3.0.1",
44
"peerDependencies": {
5-
"@angular/common": ">=12.0.0",
6-
"@angular/core": ">=12.0.0"
5+
"@angular/common": "^14.0.0",
6+
"@angular/core": "^14.0.0"
77
},
88
"dependencies": {
9-
"tslib": "^2.0.0",
10-
"@angular/forms": ">=12.0.0",
11-
"@angular/material": ">=12.0.0"
9+
"tslib": "^2.0.0"
1210
},
1311
"author": {
1412
"name": "Dino Klicek",

0 commit comments

Comments
 (0)