I am new to Angular, but I have been trying my best to learn as much as possible. Currently, I am working on making a form using FormGroup and FormControl, but there seems to be something very odd happening. When I try to enter a value or update the value in the text field, the FormGroup component "odometerReader" updates the value and remains 1 character behind. It have attached a link in the bottom. I am puzzled and unable to debug this . Is there anyone who has gone through this ?

Demo

HTML File

    <form
        #form="ngForm"
        [formGroup]="odometerForm"
        (ngSubmit)="onSubmit()" 
        >
        <div class="fieldset field-container"
            [ngClass]="{'fieldset--invalid fieldset--invalid-without-warning-icon': (odometerReader.invalid || odometerReader.value == null) && form.submitted}">
            <input class="input input__suffix"
                data-piiexclude
                formControlName="odometerReader"
                maxlength="7"
                max="9999999"
                min="0"
                placeholder="Ex: 10000"
                type="number"/>
            <div class="input-suffix">Km</div>

            <div class="fieldset__error-message" *ngIf = "(odometerReader.invalid || odometerReader.value == null) && form.submitted">
                Please enter an odometer reading and select 'Next', otherwise select 'Unsure' to continue.
            </div>
        </div>
    </form>

My Component

constructor(
    private fb: FormBuilder,
    private seo: SeoService,
    private journeyService: JourneyService
) {
    this.seo.setPageTitle(pageName);
}

ngOnInit(): void {
    this.odometerForm = new FormGroup({
        odometerReader: new FormControl(
            getStoredOdometer(),{
                validators:[
                    Validators.required,
                    Validators.min(0),
                    Validators.max(9999999)
                ]
        })
    });
}

---

Angular version in my system