कोणीय 4 फॉर्म वैलिडेटर्स - मिनी लम्बाई और अधिकतम लम्बाई फ़ील्ड प्रकार संख्या

Question

पर काम नहीं करता है, मैं एक संपर्क फ़ॉर्म विकसित करने की कोशिश कर रहा हूं, मैं चाहता हूं कि उपयोगकर्ता लंबाई 10-12 के बीच फोन नंबर मान दर्ज करे।

विशेष रूप से एक ही मान्यता संदेश मैदान पर क्षेत्र जो मुझे परेशानी दे रहा है काम कर रहा है, इसका एकमात्र संख्या।

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

मैं निम्नलिखित की तरह कोड है:

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> 

टीएस:

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

तो वह ऐसा किया जाता है, और पूरी तरह से काम किया:

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

आप लंबाई यहां उपयोग नहीं करना चाहिए, न्यूनतम और अधिकतम उपयोग कस्टम के लिए इस तरह के सत्यापनकर्ता,

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

Angular2 min/max validators

Answer 3

इस काम के नमूना कोड का प्रयास करें:

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