संख्याओं के लिए कोणीय 2 फॉर्म प्रमाणीकरण न्यूनतम और अधिकतम

Question

मेरे पास इनपुट बॉक्स के साथ एक फॉर्म है। इनपुट बॉक्स दोनों प्रकार के टेक्स्ट और संख्याओं में हैं। और मुझे उन्हें सत्यापित करना होगा और मैंने इस का पालन किया और उन्हें सत्यापित करने का प्रयास किया।

इसके अनुसार यदि मुझे एक स्ट्रिंग को सत्यापित करना है तो मैं नियंत्रण समूह का उपयोग निम्नानुसार कर सकता हूं।

constructor(fb: FormBuilder){ 
    this.complexForm = fb.group({ 
     'firstName' : [null, Validators.required], 
     'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])] 
}) 

और इस के लिए HTML कोड के रूप में निम्नानुसार ...

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
     <div class="form-group"> 
     <label>First Name:</label> 
     <input class="form-control" type="text" placeholder="John" [formControl]="complexForm.controls['firstName']"> 
     </div> 
     <div class="form-group"> 
     <label>Last Name</label> 
     <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']"> 
     </div> 
     <div class="form-group"> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </div> 
</form> 

लेकिन मैं निम्नलिखित उदाहरण के रूप में भी एक संख्या प्रकार इनपुट बॉक्स को मान्य करने के लिए है।

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
      <div class="form-group"> 
      <label>Age:</label> 
      <input class="form-control" type="number" [formControl]="complexForm.controls['age']"> 
      </div> 
      <div class="form-group"> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </div> 
</form> 

लेकिन समस्या वहाँ प्रमाणकों क्या न्यूनतम मूल्य और निवेश के लिए अधिकतम मूल्य है का चयन करने के लिए कोई विकल्प नहीं है।

क्या इस समस्या के लिए कोई समाधान है?

धन्यवाद।

Answer 1

कोई अंतर्निहित मिनट के लिए सत्यापनकर्ता/अधिकतम वर्तमान में आप चेकआउट कर सकते हैं नहीं है क्या उपलब्ध है यह देखने के लिए source for Validator।

export function maxValue(max: Number): ValidatorFn { 
    return (control: AbstractControl): {[key: string]: any} => { 
    const input = control.value, 
      isValid = input > max; 
    if(isValid) 
     return { 'maxValue': {max} } 
    else 
     return null; 
    }; 
} 

इस के साथ

आप कोणीय के वर्तमान संस्करण

constructor(fb: FormBuilder){ 
this.complexForm = fb.group({ 
    'firstName' : [null, Validators.required], 
    'lastName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])], 
    'age': [null, maxValue(60)] 
}) 

Answer 2

अगर मैं आपकी समस्या का अधिकार मिलता है, HTML में भी अपने प्रमाणकों की आवश्यकताओं को शामिल करने की कोशिश तो अपने कोड के रूप में दिखाई देगा इस प्रकार है:

<form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"> 
    <div class="form-group"> 
    <label>Age:</label> 
    <input class="form-control" type="number" required minlength="5" maxlength="10" [formControl]="complexForm.controls['age']"> 
    </div> 
    <div class="form-group"> 
    <button type="submit" class="btn btn-default">Submit</button> 
    </div> 
</form> 

Answer 3

लिए अपना कोड अपडेट कर सकते हैं:

आप क्या कर सकते tutorials in the official docs

उदाहरण निम्नलिखित एक कस्टम सत्यापनकर्ता समारोह बनाने है 4 में अब min and max validators

तो यह लेखन

this.complexForm = fb.group({ 
    age:[null,[Validators.required, Validators.min(5),Validators.max(90)]], 
}) 

याद रखें यह @angular/forms रेपो

$: npm uninstall @angular/forms --save 
$: npm install @angular/forms --save