ng-maxlength가 작동하지 않습니다.

Question

저는 Angular 4 Application을 가지고 있습니다. 숫자가있는 입력이 4 자리 이상을 받아들이지 않아야하는 양식 입력에 유효성 검사를 추가하려고합니다. 더 많은 경우 양식을 무효화해야합니다. 반응 형 양식을 사용하고 있습니다. 이것은 코드입니다.

<input class="form-control form-control-amount no-z-index" 
    id="forNumber" 
    name="forNumber" 
    formControlName="forNumber" 
    ng-required="true" 
    type="number" 
    ng-maxlength="4" 
    [(ngModel)]="saveNumber" 
    [attr.disabled]="!condition? 'disabled': null " 
    #forNumber 
    > 

<small class="alert alert-danger" *ngIf="!form.get('forNumber').valid"> 
     Invalid input. 
</small> 

11111을 입력하면 항목이 잘못되어 위의 경고 메시지가 인쇄됩니다. 그것은 일어나지 않습니다. 무엇이 잘못 되었습니까? 감사.

Answer 1

먼저 ngModel과 formControlName을 함께 사용하지 마십시오. 그리고 ViewChild 참조에 대해 알지 못하고 그걸로 무엇을하는지 알지만, 값을 얻는 것만이라면 그 중 하나가 필요하지 않습니다.

두 번째로, ng-은 Angular가 아닌 AngularJS입니다.

셋째, 컨트롤에 유효성 검사기를 추가해야합니다. 이제

<input class="form-control form-control-amount no-z-index" 
    id="forNumber" 
    name="forNumber" 
    formControlName="forNumber" 
    ng-required="true" 
    type="number" 
    maxlength="4" 
    [attr.disabled]="!condition? 'disabled': null " 
> 

, 당신의 TS의 유효성 검사기를 추가하는

constructor(private FB: FormBuilder) { 
    this.myForm = FB.group({ 
    forNumber: ['', [Validators.maxLength(4)]] 
    }); 
}