Skip to content

Commit 3ddaf36

Browse files
dineeekdineeek
committed
Add readonly for every input
1 parent 3a8244b commit 3ddaf36

File tree

11 files changed

+51
-22
lines changed

11 files changed

+51
-22
lines changed

‎ngx-numeric-range-form-field/README.md

Lines changed: 8 additions & 3 deletions
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 minimum number and maximum number of some range.
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.
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

@@ -48,7 +48,10 @@ form: FormGroup;
4848

4949
constructor() {
5050
this.form = new FormGroup({
51-
range: new FormControl(null, [
51+
range: new FormControl({
52+
minimum: 10,
53+
maximum: 100,
54+
}, [
5255
Validators.required, //optional
5356
Validators.min(10), //optional
5457
Validators.max(100), //optional
@@ -82,6 +85,8 @@ Customizable input and output decorators:
8285
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
8386
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
8487
@Input() readonly = false; // Indicator wether the both controls are readonly
88+
@Input() minReadonly = false; // Indicator wether the minimum control is readonly
89+
@Input() maxReadonly = false; // Indicator wether the maximum control is readonly
8590
@Input() resettable = true; // Indicator wether the both controls are resettable
8691
@Input() required: boolean; // Required validation
8792
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
@@ -107,4 +112,4 @@ export interface INumericRange {
107112

108113
Apache License
109114

110-
Copyright (c) 2021 Dino Klicek
115+
Copyright (c) 2022 Dino Klicek

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,5 @@
44
(blurred)="onBlur()"
55
(enterPressed)="onEnter()"
66
(numericRangeChanged)="onValueChange($event)"
7+
[minReadonly]="true"
78
></ngx-numeric-range-form-field>
8-
9-
<button>DINOO</button>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,13 @@ export class AppComponent {
1212

1313
constructor() {
1414
this.form = new FormGroup({
15-
range: new FormControl(10, [
16-
Validators.required,
17-
Validators.min(10),
18-
Validators.max(100),
19-
]),
15+
range: new FormControl(
16+
{
17+
minimum: 10,
18+
maximum: 100,
19+
} as INumericRange,
20+
[Validators.required, Validators.min(10), Validators.max(100)]
21+
),
2022
});
2123
}
2224

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
### 2.2.0
2+
3+
Added readonly for every input.
4+
15
### 2.1.0
26

3-
Fixed on touched control implementation.
7+
Fixed onTouched control implementation.
48
Improved synchronous validation.
59
Added async validation.
610

@@ -11,11 +15,11 @@ Refactored lib name to `ngx-numeric-range-form-field`.
1115

1216
### 1.0.3
1317

14-
Additional validation bugs fixing
18+
Validation bugs fixing.
1519

1620
### 1.0.2
1721

18-
Fixed validation bugs and added tests
22+
Fixed validation bugs and added tests.
1923

2024
### 1.0.1
2125

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

Lines changed: 8 additions & 3 deletions
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 minimum number and maximum number of some range.
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.
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

@@ -48,7 +48,10 @@ form: FormGroup;
4848

4949
constructor() {
5050
this.form = new FormGroup({
51-
range: new FormControl(null, [
51+
range: new FormControl({
52+
minimum: 10,
53+
maximum: 100,
54+
}, [
5255
Validators.required, //optional
5356
Validators.min(10), //optional
5457
Validators.max(100), //optional
@@ -82,6 +85,8 @@ Customizable input and output decorators:
8285
@Input() minPlaceholder = 'From'; // Placeholder of the minimum value control
8386
@Input() maxPlaceholder = 'To'; // Placeholder of the maximum value control
8487
@Input() readonly = false; // Indicator wether the both controls are readonly
88+
@Input() minReadonly = false; // Indicator wether the minimum control is readonly
89+
@Input() maxReadonly = false; // Indicator wether the maximum control is readonly
8590
@Input() resettable = true; // Indicator wether the both controls are resettable
8691
@Input() required: boolean; // Required validation
8792
@Input() requiredErrorMessage = 'Field is required!'; // Customizable error message when field is required
@@ -107,4 +112,4 @@ export interface INumericRange {
107112

108113
Apache License
109114

110-
Copyright (c) 2021 Dino Klicek
115+
Copyright (c) 2022 Dino Klicek

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-numeric-range-form-field",
3-
"version": "2.1.0",
3+
"version": "2.2.0",
44
"peerDependencies": {
55
"@angular/common": "^13.0.0",
66
"@angular/core": "^13.0.0"

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/src/lib/container/numeric-range-form-field-container.component.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
[minPlaceholder]="minPlaceholder"
1111
[maxPlaceholder]="maxPlaceholder"
1212
[readonly]="readonly"
13+
[minReadonly]="minReadonly"
14+
[maxReadonly]="maxReadonly"
1315
[required]="required"
1416
(blurred)="onBlur()"
1517
(enterPressed)="onEnterPressed()"
@@ -21,6 +23,8 @@
2123
*ngIf="
2224
resettable &&
2325
!readonly &&
26+
!minReadonly &&
27+
!maxReadonly &&
2428
(minimumControl.value !== null || maximumControl.value !== null) &&
2529
!formGroup.disabled
2630
"

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/src/lib/container/numeric-range-form-field-container.component.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { TOUCH_BUFFER_MS } from '@angular/cdk/a11y/input-modality/input-modality-detector';
12
import {
23
ChangeDetectionStrategy,
34
ChangeDetectorRef,
@@ -45,6 +46,8 @@ export class NumericRangeFormFieldContainerComponent
4546
@Input() minPlaceholder = 'From';
4647
@Input() maxPlaceholder = 'To';
4748
@Input() readonly = false;
49+
@Input() minReadonly = false;
50+
@Input() maxReadonly = false;
4851
@Input() resettable = true;
4952
@Input() required: boolean;
5053
@Input() requiredErrorMessage = 'Field is required!';
@@ -83,7 +86,7 @@ export class NumericRangeFormFieldContainerComponent
8386
this.setSyncValidator(this.controlDirective.control.validator);
8487
this.setAsyncValidator(this.controlDirective.control.asyncValidator);
8588

86-
this.controlDirective.control.addValidators([this.validate.bind(this)]);
89+
this.controlDirective.control.setValidators([this.validate.bind(this)]); // overrides the parent control validators by sending out errors from validate()
8790
this.controlDirective.control.updateValueAndValidity({ emitEvent: false });
8891

8992
this.changeDetectorRef.detectChanges();
@@ -144,7 +147,7 @@ export class NumericRangeFormFieldContainerComponent
144147
return;
145148
}
146149

147-
this.control.addValidators(validator); // sets the validators on parent control
150+
this.control.addValidators(validator); // sets the validators from parent control
148151
this.control.updateValueAndValidity();
149152
}
150153

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/src/lib/control/numeric-range-form-field-control.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
(blur)="onBlur()"
33
(change)="onRangeValuesChanged()"
44
(keyup.enter)="onEnterPressed()"
5-
[readonly]="readonly"
5+
[readonly]="readonly || minReadonly"
66
[formControl]="minimumControl"
77
matInput
88
[placeholder]="minPlaceholder"
@@ -14,7 +14,7 @@
1414
(change)="onRangeValuesChanged()"
1515
(keyup.enter)="onEnterPressed()"
1616
[formControl]="maximumControl"
17-
[readonly]="readonly"
17+
[readonly]="readonly || maxReadonly"
1818
matInput
1919
[placeholder]="maxPlaceholder"
2020
type="number"

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/src/lib/control/numeric-range-form-field-control.component.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,9 @@
1212
-webkit-appearance: none;
1313
margin: 0;
1414
}
15+
16+
input:read-only {
17+
color: rgba($color: #000000, $alpha: 0.5);
18+
cursor: initial;
19+
}
1520
}

‎ngx-numeric-range-form-field/projects/ngx-numeric-range-form-field/src/lib/control/numeric-range-form-field-control.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ export class NumericRangeFormFieldControlComponent
7474
@Input() minPlaceholder: string;
7575
@Input() maxPlaceholder: string;
7676
@Input() readonly = false;
77+
@Input() minReadonly = false;
78+
@Input() maxReadonly = false;
7779
@Input() required: boolean;
7880
@Input() disabled: boolean;
7981
@Input() errorStateMatcher: ErrorStateMatcher;
@@ -140,7 +142,7 @@ export class NumericRangeFormFieldControlComponent
140142
this.formService.setSyncValidators(this.ngControl.control.validator);
141143
this.formService.setAsyncValidators(this.ngControl.control.asyncValidator);
142144

143-
this.ngControl.control.addValidators([this.validate.bind(this)]);
145+
this.ngControl.control.setValidators([this.validate.bind(this)]);
144146
this.ngControl.control.updateValueAndValidity({ emitEvent: false });
145147
}
146148

0 commit comments

Comments
 (0)