Trying to implement an Angular component input with number type that allows setting a maximum and minimum value.
Here is the code snippet used for calling the component in HTML:
<app-input-number [(value)]="inputMinMaxValueNumber" [min]="min" [max]="max"></app-input-number>
Below is the HTML code snippet for the actual component:
<input class="gh-input" type="number" [max]="max" [min]="min" [name]="name"
[readonly]="readonly" [disabled]="disabled" [ngClass]="disabled ? 'disabled' : ''" [value]="value" />
And here's the TypeScript logic for the component:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-input-number',
templateUrl: './input-number.component.html',
styleUrls: ['./input-number.component.scss']
})
export class InputNumberComponent implements OnInit {
@Input() name: String;
@Input() readonly: Boolean;
@Input() disabled: Boolean;
@Input() max: number;
@Input() min: number;
currentValue: number;
@Output()
valueChange = new EventEmitter<number>();
@Input()
get value() {
return this.currentValue;
}
set value(val) {
if (val > this.max) {
this.currentValue = this.max;
} else if (val < this.min) {
this.currentValue = this.min;
} else {
this.currentValue = val;
}
this.valueChange.emit(this.currentValue);
}
constructor(private translateService: TranslateService) { }
ngOnInit() {
}
}
Facing an issue where manually entering a value exceeding the max limit works initially but fails to restrict the value afterward (works fine for the min).
Appreciate any assistance provided.