title: Angular 6 validate number input
body: <p>I have an input and the type is number. I want to set min and max, if the input is out of this range (&lt; min or >max), the error will be displayed. </p>
  
  <p>My problem is that if the input is not empty but invalid, the error disappears (example: min =10, max =20, input =2000, still no error displays).</p>
  
  <p>I search on this site and there is a post about validation but the solution is to use &lt; md-input-container> and &lt; md-error>. I don't want to use &lt; md-input-container> and &lt; md-error>.</p>
  
  <p>Reference:<a href="https://stackoverflow.com/questions/45480004/min-and-max-value-of-input-in-angular4-application">here</a></p>
  
  <p>Is there anyway to solve my problem?</p>
  
  <p>My add-hero.component.html:</p>
  
  <pre><code>&lt;div class="publishedYear"&gt;
  &lt;label&gt;Publish Year: &lt;/label&gt;
  &lt;input type="number" id="PublishedYear" name="PublishedYear" required min="10" max="20" 
  [(ngModel)]="hero.PublishedYear" #publishedYear="ngModel"&gt;
  &lt;p class="alert alert-danger invalid" *ngIf="publishedYear.errors"&gt;Invalid Published Year&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My Hero.ts</p>
  
  <pre><code>export class Hero {
  Id: number;
  Name: string;
  PublishedYear: number;
  Complete?: boolean;
  }
  </code></pre>