Add readonly for every input

Author: dineeek

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

@@ -1,6 +1,6 @@
 # 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.
+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.
 
 ![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)
 
@@ -48,7 +48,10 @@ form: FormGroup;
 
 	constructor() {
 		this.form = new FormGroup({
-			range: new FormControl(null, [
+			range: new FormControl({
+					minimum: 10,
+					maximum: 100,
+				}, [
 				Validators.required, //optional
 				Validators.min(10), //optional
 				Validators.max(100), //optional
@@ -82,6 +85,8 @@ Customizable input and output decorators:
 @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() minReadonly = false; // Indicator wether the minimum control is readonly
+@Input() maxReadonly = false; // Indicator wether the maximum control is 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
@@ -107,4 +112,4 @@ export interface INumericRange {
 
 Apache License
 
-Copyright (c) 2021 Dino Klicek
+Copyright (c) 2022 Dino Klicek

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

@@ -4,6 +4,5 @@
 	(blurred)="onBlur()"
 	(enterPressed)="onEnter()"
 	(numericRangeChanged)="onValueChange($event)"
+	[minReadonly]="true"
 ></ngx-numeric-range-form-field>
-
-<button>DINOO</button>

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

@@ -12,11 +12,13 @@ export class AppComponent {
 
 	constructor() {
 		this.form = new FormGroup({
-			range: new FormControl(10, [
-				Validators.required,
-				Validators.min(10),
-				Validators.max(100),
-			]),
+			range: new FormControl(
+				{
+					minimum: 10,
+					maximum: 100,
+				} as INumericRange,
+				[Validators.required, Validators.min(10), Validators.max(100)]
+			),
 		});
 	}
 

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

@@ -1,6 +1,10 @@
+### 2.2.0
+
+Added readonly for every input.
+
 ### 2.1.0
 
-Fixed on touched control implementation.
+Fixed onTouched control implementation.
 Improved synchronous validation.
 Added async validation.
 
@@ -11,11 +15,11 @@ Refactored lib name to `ngx-numeric-range-form-field`.
 
 ### 1.0.3
 
-Additional validation bugs fixing
+Validation bugs fixing.
 
 ### 1.0.2
 
-Fixed validation bugs and added tests
+Fixed validation bugs and added tests.
 
 ### 1.0.1
 

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

@@ -1,6 +1,6 @@
 # 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.
+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.
 
 ![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)
 
@@ -48,7 +48,10 @@ form: FormGroup;
 
 	constructor() {
 		this.form = new FormGroup({
-			range: new FormControl(null, [
+			range: new FormControl({
+					minimum: 10,
+					maximum: 100,
+				}, [
 				Validators.required, //optional
 				Validators.min(10), //optional
 				Validators.max(100), //optional
@@ -82,6 +85,8 @@ Customizable input and output decorators:
 @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() minReadonly = false; // Indicator wether the minimum control is readonly
+@Input() maxReadonly = false; // Indicator wether the maximum control is 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
@@ -107,4 +112,4 @@ export interface INumericRange {
 
 Apache License
 
-Copyright (c) 2021 Dino Klicek
+Copyright (c) 2022 Dino Klicek

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

@@ -1,6 +1,6 @@
 {
 	"name": "ngx-numeric-range-form-field",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"peerDependencies": {
 		"@angular/common": "^13.0.0",
 		"@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

@@ -10,6 +10,8 @@
 		[minPlaceholder]="minPlaceholder"
 		[maxPlaceholder]="maxPlaceholder"
 		[readonly]="readonly"
+		[minReadonly]="minReadonly"
+		[maxReadonly]="maxReadonly"
 		[required]="required"
 		(blurred)="onBlur()"
 		(enterPressed)="onEnterPressed()"
@@ -21,6 +23,8 @@
 		*ngIf="
 			resettable &&
 			!readonly &&
+			!minReadonly &&
+			!maxReadonly &&
 			(minimumControl.value !== null || maximumControl.value !== null) &&
 			!formGroup.disabled
 		"

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

@@ -1,3 +1,4 @@
+import { TOUCH_BUFFER_MS } from '@angular/cdk/a11y/input-modality/input-modality-detector';
 import {
 	ChangeDetectionStrategy,
 	ChangeDetectorRef,
@@ -45,6 +46,8 @@ export class NumericRangeFormFieldContainerComponent
 	@Input() minPlaceholder = 'From';
 	@Input() maxPlaceholder = 'To';
 	@Input() readonly = false;
+	@Input() minReadonly = false;
+	@Input() maxReadonly = false;
 	@Input() resettable = true;
 	@Input() required: boolean;
 	@Input() requiredErrorMessage = 'Field is required!';
@@ -83,7 +86,7 @@ export class NumericRangeFormFieldContainerComponent
 		this.setSyncValidator(this.controlDirective.control.validator);
 		this.setAsyncValidator(this.controlDirective.control.asyncValidator);
 
-		this.controlDirective.control.addValidators([this.validate.bind(this)]);
+		this.controlDirective.control.setValidators([this.validate.bind(this)]); // overrides the parent control validators by sending out errors from validate()
 		this.controlDirective.control.updateValueAndValidity({ emitEvent: false });
 
 		this.changeDetectorRef.detectChanges();
@@ -144,7 +147,7 @@ export class NumericRangeFormFieldContainerComponent
 			return;
 		}
 
-		this.control.addValidators(validator); // sets the validators on parent control
+		this.control.addValidators(validator); // sets the validators from parent control
 		this.control.updateValueAndValidity();
 	}
 

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

@@ -2,7 +2,7 @@
 	(blur)="onBlur()"
 	(change)="onRangeValuesChanged()"
 	(keyup.enter)="onEnterPressed()"
-	[readonly]="readonly"
+	[readonly]="readonly || minReadonly"
 	[formControl]="minimumControl"
 	matInput
 	[placeholder]="minPlaceholder"
@@ -14,7 +14,7 @@
 	(change)="onRangeValuesChanged()"
 	(keyup.enter)="onEnterPressed()"
 	[formControl]="maximumControl"
-	[readonly]="readonly"
+	[readonly]="readonly || maxReadonly"
 	matInput
 	[placeholder]="maxPlaceholder"
 	type="number"

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

@@ -12,4 +12,9 @@
 		-webkit-appearance: none;
 		margin: 0;
 	}
+
+	input:read-only {
+		color: rgba($color: #000000, $alpha: 0.5);
+		cursor: initial;
+	}
 }

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

@@ -74,6 +74,8 @@ export class NumericRangeFormFieldControlComponent
 	@Input() minPlaceholder: string;
 	@Input() maxPlaceholder: string;
 	@Input() readonly = false;
+	@Input() minReadonly = false;
+	@Input() maxReadonly = false;
 	@Input() required: boolean;
 	@Input() disabled: boolean;
 	@Input() errorStateMatcher: ErrorStateMatcher;
@@ -140,7 +142,7 @@ export class NumericRangeFormFieldControlComponent
 		this.formService.setSyncValidators(this.ngControl.control.validator);
 		this.formService.setAsyncValidators(this.ngControl.control.asyncValidator);
 
-		this.ngControl.control.addValidators([this.validate.bind(this)]);
+		this.ngControl.control.setValidators([this.validate.bind(this)]);
 		this.ngControl.control.updateValueAndValidity({ emitEvent: false });
 	}