Açısal 4 Form Validators - minLength & maxLength alan numarası numarası

Question

üzerinde çalışmıyor İletişim formu geliştirmeye çalışıyorum, kullanıcının telefon numarası değerlerini 10-12 arasında girmesini istiyorum.

Özellikle aynı doğrulama Onun sadece sayı, İleti sahada başıma dert veriyor alanını çalışıyor.

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

aşağıdaki gibi bir kod vardır:

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

aşağıdaki gibi kullanılır ve mükemmel çalıştı:

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

Burada uzunluğunu kullanmamalısınız, minimum ve maksimum kullanım özel için bu gibi bir doğrulayıcı,

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

Angular2 min/max validators

Answer 3

bu çalışma örnek kod deneyin:

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)])] 
     }); 
} 
}