Sprawdź, czy e-maile pasują do rozmycia

Question

Próbuję sprawdzić, czy pole e-mail i pole potwierdzenia adresu e-mail pasują do siebie. Oznacza to, że użytkownik wpisuje swój adres e-mail, a następnie musi go potwierdzić ponownie. Chcę, aby mecz/sprawdzanie poprawności odbywało się przy rozmyciu (gdy użytkownik naciśnie klawisz enter lub pole tekstowe straci ostrość).

Oto mój plik ts:

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

Oto mój widok:

<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> 

Obecnie przy okazji to skonfigurować, walidacja występuje, ale nie zostanie skasowany, gdy jest poprawny mecz wkład. Zastanawiam się, jak mogę poprawnie ustawić mój widok? Tak więc komunikat sprawdzania poprawności jest pokazywany/ukrywany, gdy poprawne dopasowanie jest ustawione, a nie.

Wygląda na to, że Form.get('email').length > 0 nigdy nie jest większy niż 0/nigdy nie trafiony, więc moja etykieta nie przełącza się na kliknięcie.

Używam formularzy Angular 2 i reaktywnych.

Answer 1

Wygląda, że ​​jesteś zmieszanie dwóch składnie forma: szablon napędzane formy i modelowego formy.

Ponieważ deklarujesz model formularza w klasie FormBuilder, zakładam, że chcesz mieć model oparty na modelu.

To oznacza, że ​​twoje pola nie wymagają atrybutów takich jak [(ngModel)] lub #EmailAddress.

Zamiast tego:

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

napisać to:

<!-- 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"> 

WSZYSTKICH walidatorami muszą być zadeklarowane w FormBuilder. Nie tylko matchingEmailsValidator, ale również required:

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

Teraz można uzyskać dostęp do pola o następującej składni:

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

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

Można użyć tych składnie do wyświetlania błędów. Na przykład:

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

w powyższym przykładzie, jestem wyświetlając komunikat o błędzie, jeśli pole email została dotknięta (tzn użytkownik próbował wprowadzić coś) a błąd required jest obecny.

Można również sprawdzić, czy reguły sprawdzania poprawności są egzekwowane, sprawdzając znaczniki formularza za pomocą narzędzi programistycznych przeglądarki. Angular powinien dodać klasy takie jak .ng-invalid lub .ng-valid do tagów <input>, które mają reguły sprawdzania poprawności.

Wreszcie, jeśli chodzi o twoje pytanie, aby sprawdzić e-mail, mecz na rozmycie.Nie możesz odroczyć sprawdzania poprawności Angulara, stanie się to w czasie rzeczywistym (tak jak typuje użytkownik). Ale możesz czekać czekać na zdarzenie blur, aby wyświetlić błędy.

Łącząc tę ​​ostatnią porady z mojego poprzedniego przykładu, oto jak mogłeś powinien błędu jeśli pole email jest puste i traci ostrość (zdarzenie blur):

<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> 

---

UPDATE (01 -FEB-2017) po Eurydyki pisał this Plunkr:

• nadal masz wayyyyy do większego walidacji kodu w szablonie. Tak jak powiedziałem, WSZYSTKIE ZALICZKI powinny być zadeklarowane w MODELU FORMULARNYM (z FormBuilder). Dokładniej:
  • atrybut w dziedzinie emailpattern="..." należy zastąpić Validators.pattern() w modelu formularza.
  • Jaki jest atrybut validateEqual="email" w polu confirmEmail? Nigdzie tego nie używasz.
• Głównym problemem jest twój test, aby wyświetlić komunikat o błędzie: *ngIf="displayErrors && !Form.get('email').valid && Form.get('email').error.mismatch".
  • Przede wszystkim właściwość to errors z "s", a nie error.
  • Twój niestandardowy weryfikator ustawia błąd na samym formularzu, NIE w polu wiadomości e-mail. Oznacza to, że powinieneś pobrać swój niestandardowy błąd mismatch z Form.errors.mismatch, NOT Form.get('email').errors.mismatch.

Oto zaktualizowana, Plunkr pracy: https://plnkr.co/edit/dTjcqlm6rZQxA7E0yZLa?p=preview