Witam.
Czy może mi ktoś wyjaśnić, dlaczego za pierwszym razem gdy wpisuję w input wartość poza limitem to wartość ta zostaje poprawiona na max, czyli 1000. Jednak gdy tą wartość zmodyfikuję na inną większą liczbę to wartość niestety nie ulega ponownej zmianie w polu input value. Wartość przekazana przez emit jest poprawna i wynosi 1000.
number-input.component.ts
import {Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'ngx-number-input',
templateUrl: './number-input.component.html',
styleUrls: ['./number-input.component.scss'],
})
export class NumberInputComponent implements OnInit {
@Input()
public counter: number = 0;
@Input()
public step: number = 1;
@Input()
public readonly: boolean = false;
@Output()
counterChange: EventEmitter<number> = new EventEmitter<number>();
@Input()
public max: number = 1000;
@Input()
public min: number = 1;
constructor() {
}
ngOnInit(): void {
}
increment() {
const value = this.counter + this.step;
this.setCounter(value);
}
decrement() {
const value = this.counter - this.step;
this.setCounter(value);
}
onChangeEvent(event: any) {
const value = parseInt(event.target.value, null);
this.setCounter(value);
}
setCounter(value: number) {
let correct: boolean = true;
if (value > this.max) {
this.counter = this.max;
correct = false;
}
if (value < this.min) {
this.counter = this.min;
correct = false;
}
if (correct) {
this.counter = value;
}
this.counterChange.emit(this.counter);
}
}
number-input.component.html
<div>
<button (click)="decrement()">-</button>
<input [value]="counter" type="text" (change)="onChangeEvent($event)">
<button (click)="increment()">+</button>
</div>
Wywołanie
<ngx-number-input [(counter)]="object.test1"></ngx-number-input>
{{object.test1}}