Angular 2：长度验证不起作用

Question

我正在尝试简单地从 Angular 网站复制演练，但无法进行长度验证：

<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>

我一定是遗漏了一些简单的东西，但是由于某种原因，required 验证会根据输入而变化，但是 minlength 和 maxlength 总是 false，无论我的输入有多长。

Answer 1

因为数字类型没有长度属性

此 https://github.com/angular/angular/issues/15053

存在错误

您可以像这样解决它：

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

Plunker Example

更新

因为在 4.2.0-beta.0 (2017-05-04) 中引入了最小和最大验证器所以你可以看看 https://github.com/angular/angular/pull/15813/commits/52b0ec8062381e7285b5f66aa83008edfbf02af3

Angular 2：长度验证不起作用

Angular 2: Length validation not working

javascript

angular2-forms

angular-validation

angular