angular2 में फॉर्म सत्यापन पैटर्न कैसे जोड़ें

Question

कहें कि मेरे पास एक साधारण रूप है जिसे इनपुट की शुरुआत और अंत के अंत में सत्यापित करने की आवश्यकता है, वह स्थान नहीं है।

एचटीएमएल 5 में, मैं यह करूँगा: <input type="text" pattern="^(?!\s|.*\s$).*$">।

नए Angular2 ngControl निर्देश में सत्यापन पैटर्न के लिए सही संपत्ति क्या है? आधिकारिक बीटा एपीआई अभी भी इस मुद्दे पर दस्तावेज़ीकरण की कमी है।

अद्यतन:

यह पता चला Control class सबसे व्यवहार्य तरीका form करने के लिए regex मान्यता पैटर्न जोड़ना है।

यहाँ एक example कि आधिकारिक डेवलपर मार्गदर्शिकाओं से बीटा उदाहरण के लिए एक कस्टम सत्यापनकर्ता जोड़ा है।

कुंजी FormBuilder बनाने और <form> तत्व की ngFormModel संपत्ति को असाइन करने की कुंजी है।

Answer 1

देखें अब, आप FormBuilder और सभी इस जटिल valiation कोणीय सामान का उपयोग करने की जरूरत नहीं है। रेपो से https://github.com/angular/angular/commit/38cb526

उदाहरण:: - (3march2016 कोणीय 2.0.8) मैं इस से अधिक विवरण डाल -:

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm' > 
... 
<input 
    id='room-capacity' 
    type="text" 
    class="form-control" 
    [(ngModel)]='room.capacity' 
    ngControl="capacity" 
    required 
    pattern="[0-9]+" 
    #capacity='ngForm'> 

<input [ngControl]="fullName" pattern="[a-zA-Z ]*"> 

मैं इसे परीक्षण करने और यह काम करता है :) यहाँ मेरी कोड है

अद्यतन जून 2017

मैं बस जब मैं और अधिक अनुभव है कि कहने के लिए वर्तमान में, चाहता हूँ मैं डेटा सत्यापन के लिए हम निम्नलिखित 'सस्ते' दृष्टिकोण का उपयोग करें:

प्रमाणीकरण केवल सर्वर पक्ष पर है (बिल्कुल कोणीय में नहीं!) और यदि कुछ गलत है तो सर्वर (RESTful API) कुछ त्रुटि कोड जैसे HTTP 400 और निम्नलिखित json वस्तु प्रतिक्रिया शरीर में (जो कोणीय में मैं err चर डाला) वापसी:

this.err = { 
    "capacity" : "too_small" 
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name", 
    ... 
} 

(यदि सर्वर वापसी सत्यापन में त्रुटि अलग स्वरूप तो आप आमतौर पर आसानी से इसे ऊपर संरचना करने के लिए अलग-अलग टैग (div/span/छोटे आदि)

<input [(ngModel)]='room.capacity' ...> 
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small> 

जैसा कि आप देख, मैप कर सकते हैं)

HTML टेम्प्लेट में मैं का उपयोग जब वहाँ में कुछ त्रुटि है 'Capac ity 'फिर त्रुटि अनुवाद (उपयोगकर्ता भाषा के लिए) के साथ टैग दिखाई देगा। यह दृष्टिकोण निम्नलिखित फायदे हैं:

• यह बहुत सरल है
कोणीय में
• हम नहीं डबल सत्यापन कोड जो सर्वर में है (और) होना चाहिए (regexp सत्यापन के मामले यह या तो रोकने के लिए या ReDoS हमलों को मुश्किल कर सकते हैं में)
• हम रास्ते पर पूरा नियंत्रण है त्रुटि (<small> टैग में यहाँ egzample के रूप में) उपयोगकर्ता को दिखाया जाएगा
• क्योंकि सर्वर जवाब में हम ERROR_NAME (प्रत्यक्ष त्रुटि संदेश के बजाय) लौटने के लिए, हम आसानी से त्रुटि संदेश को बदल सकते हैं (या इसका अनुवाद) ओएनएल संशोधित करके वाई फ्रंटेंड-कोणीय कोड (या अनुवाद के साथ फाइलें)। तो उस स्थिति में हमें बैकएंड/सर्वर कोड को छूने की आवश्यकता नहीं है।

बेशक

कभी कभी (यह आवश्यक हो, तो -। जैसे retypePassword क्षेत्र है जो सर्वर के लिए कभी नहीं भेज रहा है) मैं ऊपर दृष्टिकोण का अपवाद नहीं करते और कोणीय में कुछ सत्यापन कर (लेकिन समान "this.err" तंत्र का उपयोग त्रुटियों को दिखाने के लिए (तो मैं pattern का उपयोग नहीं input टैग में सीधे विशेषता बल्कि मैं कुछ घटक विधि उपयोगकर्ता के बाद इनपुट-परिवर्तन की तरह उचित घटना को बढ़ाने या बचाने के लिए) में regexp सत्यापन बनाते हैं। कदम से

Answer 2

आप फॉर्मबिल्डर का उपयोग करके अपना फॉर्म बना सकते हैं क्योंकि यह फ़ॉर्म को कॉन्फ़िगर करने के लिए आपको अधिक लचीला तरीका प्रदान करता है।

export class MyComp { 
    form: ControlGroup; 

    constructor(@Inject()fb: FormBuilder) { 
    this.form = fb.group({ 
     foo: ['', MyValidators.regex(/^(?!\s|.*\s$).*$/)] 
    }); 
    } 

अपने खाके में

तब:

<input type="text" ngControl="foo" /> 
<div *ngIf="!form.foo.valid">Please correct foo entry !</div> 

तुम भी एनजी-अवैध CSS वर्ग अनुकूलित कर सकते हैं।

चूंकि वास्तव में रेगेक्स के लिए कोई वैधता नहीं है, तो आपको अपना खुद का लिखना होगा। यह एक साधारण कार्य है जो इनपुट में नियंत्रण लेता है, और वैध होने पर शून्य या अमान्य होने पर स्ट्रिंग मैप वापस लौटाता है।

export class MyValidators { 
    static regex(pattern: string): Function { 
    return (control: Control): {[key: string]: any} => { 
     return control.value.match(pattern) ? null : {pattern: true}; 
    }; 
    } 
} 

आशा है कि यह आपकी मदद करे।

Answer 3

एक नया संस्करण 2.0.0-बीटा 8 (2016-03-02) में अब Validators.pattern रेगेक्स सत्यापनकर्ता शामिल है।

CHANGELOG

Answer 4

कस्टम सत्यापन कदम

एचटीएमएल टेम्पलेट

<form [ngFormModel]="demoForm"> 
    <input 
    name="NotAllowSpecialCharacters"  
    type="text"      
    #demo="ngForm" 
    [ngFormControl] ="demoForm.controls['spec']" 
    > 

<div class='error' *ngIf="demo.control.touched"> 
    <div *ngIf="demo.control.hasError('required')"> field is required.</div> 
    <div *ngIf="demo.control.hasError('invalidChar')">Special Characters are not Allowed</div> 
</div> 
    </form> 

घटक App.ts

import {Control, ControlGroup, FormBuilder, Validators, NgForm, NgClass} from 'angular2/common'; 
import {CustomValidator} from '../../yourServices/validatorService'; 

वर्ग तहत

परिभाषित

demoForm: ControlGroup; 
constructor(@Inject(FormBuilder) private Fb: FormBuilder) { 
    this.demoForm = Fb.group({ 
     spec: new Control('', Validators.compose([Validators.required, CustomValidator.specialCharValidator])), 
     }) 
} 

तहत

{../../yourServices/validatorService.ts}

export class CustomValidator { 
    static specialCharValidator(control: Control): { [key: string]: any } { 
    if (control.value) { 
     if (!control.value.match(/[-!$%^&*()_+|~=`{}\[\]:";#@'<>?,.\/]/)) {    
      return null; 
     } 
     else {    
      return { 'invalidChar': true }; 
     } 
    } 

} 

} 

Answer 5

कोणीय 4.0.1 के साथ मेरा समाधान: बस आवश्यक सीवीसी इनपुट के लिए यूआई दिखा - जहां CVC ठीक 3 अंक होने चाहिए:

<form #paymentCardForm="ngForm">   
... 
     <md-input-container align="start"> 
      <input #cvc2="ngModel" mdInput type="text" id="cvc2" name="cvc2" minlength="3" maxlength="3" placeholder="CVC" [(ngModel)]="paymentCard.cvc2" [disabled]="isBusy" pattern="\d{3}" required /> 
      <md-hint *ngIf="cvc2.errors && (cvc2.touched || submitted)" class="validation-result"> 
       <span [hidden]="!cvc2.errors.required && cvc2.dirty"> 
        CVC is required. 
       </span> 
       <span [hidden]="!cvc2.errors.minlength && !cvc2.errors.maxlength && !cvc2.errors.pattern"> 
        CVC must be 3 numbers. 
       </span> 
      </md-hint> 
     </md-input-container> 
... 
<button type="submit" md-raised-button color="primary" (click)="confirm($event, paymentCardForm.value)" [disabled]="isBusy || !paymentCardForm.valid">Confirm</button> 
</form>