I am trying to simply replicate the walkthrough from the Angular website but cannot get length validation to work:

<input 
  style="display:inline-block;min-width:150px" 
  class="form-input" 
  id="phone"
  required 
  minlength="4" 
  maxlength="24"
  type="number" 
  name="phone" 
  [(ngModel)]="client.phone" 
  #phone="ngModel" /> 

  <!-- required works, minlength and maxlength always false -->
  {{ phone.hasError('required') }} {{ phone.hasError('minlength') }} {{ phone.hasError('maxlength') }}

<div *ngIf="phone.errors && (phone.dirty || phone.touched)"
   class="alert alert-danger">
  <div [hidden]="!phone.errors.required">
    Name is required
  </div>
  <div [hidden]="!phone.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div [hidden]="!phone.errors.maxlength">
    Name cannot be more than 24 characters long.
  </div>
</div>

I must be missing something simple, but for some reason the required validation changes depending on input, but both minlength and maxlength are always false regardless of how long my input is.