각도 2 :

Question

는 단순히 각 웹 사이트에서 연습을 복제하려고하지만 길이 유효성 검사가 동작하지 않습니다 작동하지 않는 길이 확인 :

<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년 5월 4일)에 분을 소개하고 최대 그래서 당신은 내가 모르는 뭔가가 알았 모습을 https://github.com/angular/angular/pull/15813/commits/52b0ec8062381e7285b5f66aa83008edfbf02af3