title: overwriting html input field value
body: <p>I'm new with angular and I'm trying to restrict possible values in a number input field.</p>
  
  <p>I want the values to be above 0 and to never show any other value within the field.</p>
  
  <p>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).</p>
  
  <p>I am able to override the value within the component, but the input field still shows invalid value.</p>
  
  <p>How can I overwrite the input field value when I detect that there is wrong input?</p>
  
  <p>For example: I type in -10, and the input field immediately shows 1.</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;p&gt;
    &lt;input type="number" [ngModel]="numberValue" (ngModelChange)='onInputChange($event)' 
     min=1&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>component code:</p>
  
  <pre><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);
        }
      }
  </code></pre>