Angular 2: Length validation not working

Question

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.

Answer 1

Its because number type doesnt have length property

There is a bug for this https://github.com/angular/angular/issues/15053

You can work around it like:

[ngModel]="client.phone" (ngModelChange)="client.phone = $event + ''"

Plunker Example

Update

Since in 4.2.0-beta.0 (2017-05-04) were introduced min and max validators so you can have a look https://github.com/angular/angular/pull/15813/commits/52b0ec8062381e7285b5f66aa83008edfbf02af3