Angular 4 Form Validators - minLength & maxLength không hoạt động trên kiểu trường số

Question

Tôi đang cố gắng phát triển một biểu mẫu liên hệ, tôi muốn người dùng nhập các giá trị số điện thoại giữa độ dài 10-12.

Điều đáng chú ý là xác thực tương tự đang hoạt động trên Trường thông báo, trường chỉ số của nó gây khó khăn cho tôi.

I found this answer but it is of no use for me.

tôi có mã như sau:

HTML:

<form [formGroup]="myForm" (ngSubmit)="myFormSubmit()"> 
     <input type="number" formControlName="phone" placeholder="Phone Number"> 
     <input type="text" formControlName="message" placeholder="Message"> 
     <button class="button" type="submit" [disabled]="!myForm.valid">Submit</button> 
</form> 

TS:

this.myForm = this.formBuilder.group({ 
    phone: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(12)]], 
    message: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(100)]] 
});` 

Answer 1

sử dụng nó như sau, và làm việc một cách hoàn hảo:

phone: ['', [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]], 

customValidationService:

import { AbstractControl, ValidatorFn } from '@angular/forms'; 
export class customValidationService { 
    static checkLimit(min: number, max: number): ValidatorFn { 
    return (c: AbstractControl): { [key: string]: boolean } | null => { 
     if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) { 
      return { 'range': true }; 
     } 
     return null; 
    }; 
} 
} 

Answer 2

Bạn không nên sử dụng chiều dài ở đây, cho min và max sử dụng tùy chỉnh người xác thực như thế này,

var numberControl = new FormControl("", CustomValidators.number({min: 10000000000, max: 999999999999 })) 

Angular2 min/max validators

Answer 3

thử này mẫu làm việc mã:

component.html

<div class="container"> 
    <form [formGroup]="myForm" 
    (ngFormSubmit)="registerUser(myForm.value)" novalidate> 
    <div class="form-group" [ngClass]="{'has-error':!myForm.controls['phone'].valid}"> 
     <label for="phone">Email</label> 
     <input type="phone" formControlName="phone" placeholder="Enter Phone" 
     class="form-control"> 
     <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('minlength')"> 
      Your phone must be at least 5 characters long. 
     </p> 
     <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('maxlength')"> 
      Your phone cannot exceed 10 characters. 
     </p> 
     <p class="alert alert-danger" *ngIf="myForm.controls['phone'].hasError('required') && myForm.controls['phone'].dirty"> 
      phone is required 
     </p> 
    </div> 
    <div class="form-group text-center"> 
     <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button> 
    </div> 
</form> 
</div> 

component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

export class AppComponent implements OnInit { 
myForm: any; 
constructor(
     private formBuilder: FormBuilder 
    ) {} 

ngOnInit() { 
    this.myForm = this.formBuilder.group({ 
      phone: [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])] 
     }); 
} 
}