जांचें कि ईमेल ब्लर

Question

पर मेल खाते हैं या नहीं, मैं यह जांचने की कोशिश कर रहा हूं कि ईमेल फ़ील्ड और पुष्टि करें कि ईमेल फ़ील्ड एक-दूसरे से मेल खाता है या नहीं। यही है, उपयोगकर्ता अपने ईमेल में टाइप करते हैं और फिर उन्हें फिर से पुष्टि करनी होती है। मैं चाहता हूं कि धुंध पर मिलान/सत्यापन हो (जब उपयोगकर्ता प्रवेश करता है या टेक्स्टफील्ड फोकस खो देता है)।

import {Component, OnInit} from '@angular/core'; 
import {User} from './user.interface'; 
import {FormBuilder, FormGroup, ValidatorFn} from '@angular/forms'; 

@Component({ 
    selector: 'my-email', 
    templateUrl: '/app/components/profile/email.component.html', 
    styleUrls:['styles.css'], 
}) 

export class EmailComponent implements OnInit { 

    public user : User; 
    Form : FormGroup; 

    ngOnInit() { 
     // initialize model here 
     this.user = { 
      Email: '', 
      confirmEmail: '' 
     } 
     if(this.Form.valid) { 
      this.displayErrors = false; 
     } 
    } 

    constructor(fb: FormBuilder, private cookieService: CookieService, private router: Router) { 
      this.Form = fb.group({ 
      email: [''], 
      confirmEmail: [''] 
     }, 
     { 
      validator: this.matchingEmailsValidator('email', 'confirmEmail') 
     }); 


    } 

    save(model: User, isValid: boolean) { 
     // call API to save customer 
     //save email 

    } 

    matchingEmailsValidator(emailKey: string, confirmEmailKey: string): ValidatorFn { 
     return (group: FormGroup): {[key: string]: any} => { 

      let email = group.controls[emailKey]; 
      let confirmEmail = group.controls[confirmEmailKey]; 

      if (email.value !== confirmEmail.value) { 
       return { 
        mismatch: true 
       }; 
      } 
     }; 
    } 
} 

यहाँ मेरे विचार है::

यहाँ मेरी ts फ़ाइल है

<form [formGroup]="Form" novalidate (ngSubmit)="Form.valid && save(Form.value, Form.valid)"> 
    <div class="container-fluid"> 
    <div id = "container" class="contain" style="text-align: center"> 
     <div> 
      <fieldset class="form-group"> 
      <label id = "rounded" class="item item-input .col-md-6 .col-md-offset-3"> 
       <input class="email-address-entry form-control" name="email" type="email" placeholder="name@domain.com" formControlName="email" pattern="^(\\w|[0-9.!#$%&’*+/=?^_\`{|}~-])+@(\\w|[0-9-])+(?:‌​[.](\\w|[0-9-])+)*$"/> 
      </label> 
       <p class="Reenter-your-email">Reenter your email to confirm</p> 
      <label id = "rounded" class="item item-input"> 
       <input class="email-address-entry form-control" (blur)="displayErrors=true" name="confirmEmail" type="email" placeholder="name@domain.com" formControlName="confirmEmail" validateEqual="email"/> 
      </label> 
      </fieldset> 
     </div> 
     <div> 
      <label class="entry-invalid"> 
      <p *ngIf="displayErrors && !Form.get('email').valid">The email you entered does not match.</p> 
      </label> 
     </div> 
     <div (click)="Form.get('email').length > 0 ? save(Form.value, Form.valid) : NaN" class="{{ Form.get('email').length > 0 ? 'container-fluid anchorBottomHighlight' : 'container-fluid anchorBottom'}}"> 
      <label class="footerLabel">Confirm</label> 
     </div> 
    </div> 
    </div> 
</form> 

वर्तमान में, जिस तरह से यह सेट अप के साथ, सत्यापन होता है, लेकिन जब सही मैच है यह मंजूरी दे दी नहीं प्राप्त करता है इनपुट। मैं सोच रहा हूं कि मैं अपना विचार सही तरीके से कैसे स्थापित कर सकता हूं? इसलिए सही मिलान सेट होने पर सत्यापन संदेश दिखाया/छुपाया जाता है।

यह भी लगता है कि Form.get('email').length > 0 0 से अधिक कभी नहीं/कभी हिट नहीं होता है, इसलिए मेरा लेबल क्लिक करने योग्य नहीं है।

मैं कोणीय 2 और प्रतिक्रियाशील रूपों का उपयोग कर रहा हूं।

Answer 1

ऐसा लगता है कि आप दो प्रपत्र वाक्यविन्यास मिश्रण कर रहे हैं: टेम्प्लेट संचालित रूपों और मॉडल पर ही आधारित रूपों।

चूंकि आप FormBuilder के साथ अपनी कक्षा में एक फॉर्म मॉडल घोषित कर रहे हैं, मुझे लगता है कि आप मॉडल-संचालित फॉर्म चाहते हैं।

इसका मतलब है कि आपके फ़ील्ड को [(ngModel)] या #EmailAddress जैसी विशेषताओं की आवश्यकता नहीं है।

इसके बजाय इस बात का:

<input type="email" [(ngModel)]="user.EmailAddress" required #EmailAddress="ngModel"> 

लिखें इस:

<!-- Now I'm using `formControlName` to bind the field to the model --> 
<!-- Its value must match one of the names you used in the FormBuilder --> 
<input type="email" formControlName="email"> 

अपने सत्यापनकर्ता के सभी FormBuilder में घोषित किया जाना चाहिए। न सिर्फ matchingEmailsValidator, लेकिन यह भी required:

this.Form = fb.group({ 
    email: ['', Validators.required], 
    confirmEmail: ['', Validators.required] 
}, 
{ 
    validator: this.matchingEmailsValidator('email', 'confirmEmail') 
}); 

अब आप एक क्षेत्र निम्न सिंटैक्स के साथ उपयोग कर सकते हैं:

// In the class 
this.Form.get('email').value 
this.Form.get('email').errors 

<!-- In the template --> 
{{ Form.get('email').value }} 
{{ Form.get('email').errors }} 

आप त्रुटियों को प्रदर्शित करने के लिए इन वाक्यविन्यास का उपयोग कर सकते हैं। उदाहरण के लिए:

<input type="email" formControlName="email"> 
<p *ngIf="Form.get('email').dirty && Form.get('email').errors.required"> 
    This field is required. 
</p> 

उपरोक्त उदाहरण में, मैंने एक त्रुटि संदेश यदि email क्षेत्र को छुआ कर दिया गया है प्रदर्शित कर रहा हूँ (अर्थात उपयोगकर्ता कुछ में घुसने की कोशिश) और required त्रुटि मौजूद है।

आप यह भी सत्यापित कर सकते हैं कि आपके सत्यापन नियमों को आपके ब्राउज़र के देव उपकरण के साथ फ़ॉर्म के मार्कअप का निरीक्षण करके लागू किया जाता है। कोणीय को .ng-invalid या .ng-valid जैसे <input> टैग्स में सत्यापन नियम होना चाहिए था।

आखिरकार, ब्लर पर ईमेल मिलान ईमेल जांचने के लिए अपने प्रश्न के संबंध में।आप कोणीय के सत्यापन को स्थगित नहीं कर सकते हैं, यह वास्तविक समय में होगा (उपयोगकर्ता प्रकार के रूप में)। लेकिन आप त्रुटियों को प्रदर्शित करने के लिए धुंध घटना की प्रतीक्षा कर सकते हैं।

मेरे पिछले उदाहरण के साथ इस आखिरी सलाह के संयोजन, यहाँ है कि कैसे आप कर सकते थे चाहिए एक त्रुटि ईमेल फ़ील्ड रिक्त है और यह ध्यान केंद्रित (कलंक घटना) को खो दिया है, तो:

<input type="email" formControlName="email" (blur)="displayErrors=true"> 
<p *ngIf="displayErrors && Form.get('email').dirty && Form.get('email').errors.required"> 
    This field is required. 
</p> 

---

अद्यतन (01 -FEB-2017) Euridice के बाद पोस्ट this Plunkr:

• आप अभी भी अपने टेम्पलेट में ज्यादा सत्यापन कोड को wayyyyy है। जैसे मैंने कहा, सभी वैलीडेटर्स को फॉर्म मॉडल में घोषित किया जाना चाहिए (FormBuilder के साथ)। अधिक विशेष रूप से:
  • email क्षेत्र में pattern="..." विशेषता प्रपत्र मॉडल में Validators.pattern() साथ प्रतिस्थापित किया जाना चाहिए।
  • confirmEmail फ़ील्ड में validateEqual="email" विशेषता क्या है? आप कहीं भी इसका उपयोग नहीं कर रहे हैं।
• मुख्य समस्या त्रुटि संदेश प्रदर्शित करने के लिए आपकी परीक्षा है: *ngIf="displayErrors && !Form.get('email').valid && Form.get('email').error.mismatch"।
  • सबसे पहले, संपत्ति errors है "0", error के साथ।
  • इसके अलावा, आपका कस्टम सत्यापनकर्ता त्रुटि को पर ईमेल फ़ील्ड पर त्रुटि सेट कर रहा है। इसका मतलब है कि आपको Form.errors.mismatch से mismatch कस्टम त्रुटि पुनर्प्राप्त करनी चाहिए, Form.get('email').errors.mismatch नहीं।

यहाँ अद्यतन है, काम कर Plunkr: https://plnkr.co/edit/dTjcqlm6rZQxA7E0yZLa?p=preview