Q:

overwriting html input field value

I'm new with angular and I'm trying to restrict possible values in a number input field.
I want the values to be above 0 and to never show any other value within the field.
I tried doing this by setting min parameter but that only works for the arrows. I still can insert the value manually (eg. typing -10).
I am able to override the value within the component, but the input field still shows invalid value.
How can I overwrite the input field value when I detect that there is wrong input?
For example: I type in -10, and the input field immediately shows 1.
html code:
<p>
  <input type="number" [ngModel]="numberValue" (ngModelChange)='onInputChange($event)' 
   min=1>
</p>

component code:
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
    numberValue:number = 1;
    ngOnInit(){
    }
    onInputChange(value:number){
    this.numberValue = Math.max(1,value);
      }
    }

A:

HTML code.
<p>
  <input type="number" [(ngModel)]="numberValue" (ngModelChange)='onInputChange($event)' 
   min=1>
</p>

Use both bracket and parentheses with ngModel like this [(ngModel)]="numberValue"
Angular class.
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
  numberValue: number = 1;

  constructor(private cdRef: ChangeDetectorRef) { }

  ngOnInit() { }

  onInputChange(value: number) {
    this.cdRef.detectChanges();
    this.numberValue = Math.max(1, value);
  }
}

use ChangeDetectorRef to update ngModel.

