2016-06-27 9 views
15

Mam następujący Kątowymi 2 postaci:kątowa walidacji 2 formy, MINLENGTH walidator nie działa

<register> 
    <form [ngFormModel] = "registrationForm"> 
     <div class = "form-group"> 
      <label class = "control-label" for="email">Email</label> 
      <input class = "form-control" type="email" id="email" ngControl="email" #email="ngForm"> 
     </div> 
     <div *ngIf = "email.touched && email.errors"> 
      <div *ngIf = "!email.errors.required && email.errors.underscoreNotFound" class = "alert alert-danger"> 
       <span>Underscore is required</span> 
      </div> 
      <div *ngIf = "email.errors.required" class = "alert alert-danger"> 
       <span>Email is required</span> 
      </div> 
     </div> 
     <div class = "form-group"> 
      <label class = "control-label" for="password">Password</label> 
      <input class = "form-control" type="password" id="password" ngControl="password" #password="ngForm"> 
     </div> 
     <div *ngIf = "password.touched && password.errors"> 
      <div *ngIf = "password.errors.minLength && !password.errors.required" class = "alert alert-danger"> 
       <span>Password should contain 6 characters</span> 
      </div> 
      <div *ngIf = "password.errors.required" class = "alert alert-danger"> 
       <span>Password is required</span> 
      </div>   
     </div> 
    </form> 
</register> 

To jest mój Komponent gdzie wdrożyliśmy weryfikatorów:

import {Component} from '@angular/core'; 
import {Control, ControlGroup, FormBuilder, Validators} from '@angular/common'; 
import {CustomValidator} from './CustomValidator'; 

@Component({ 
    selector: 'register', 
    templateUrl: './app/authentication/register_validation/register.html', 
}) 

export class RegisterComponent{ 
    registrationForm: ControlGroup; 

    constructor(formBuilder:FormBuilder) 
    { 
     this.registrationForm = formBuilder.group({ 
      email: ['',Validators.compose([Validators.required, CustomValidator.underscore])], 
      password: ['',Validators.compose([Validators.required,Validators.minLength(6)])] 
     }); 
    } 

} 

W tej formie email Pole działa poprawnie dla obu weryfikatorów, tzn. gdy niczego nie wpisuję, daje komunikat "Email is required", kiedy zaczynam pisać coś, daje on komunikat "Underscore is required", a po wpisaniu "_" wszystkie komunikaty o błędach znikają. Jednak gdy spróbuję zastosować takie 2 sprawdzania poprawności w polu password, to nie działa. Gdy nie wpisuję hasła, pojawia się komunikat: "Password is required". Ale kiedy wpisuję coś mniej niż 6 znaków, wiadomość nie pojawia się wcale. Co jest nie tak w tym kodzie?

+0

Czy możesz utworzyć https://plnkr.co za pomocą kodu –

+0

Również używasz wersji niższej niż RC3. który jest przestarzały. Wypróbuj nową wersję RC3 –

+0

może polecić tę odpowiedź http://stackoverflow.com/a/38092249/5868331 – mayur

Odpowiedz

33

error key is minlength i nie minLength:

<div *ngIf = "password.hasError('minlength') && !password.hasError('required')" class = "alert alert-danger"> 
    <span>Password should contain 6 characters</span> 
</div> 
+1

Twój link nie działa, ale rozwiązanie nadal działa. Kiedy wciąż się uczysz, można by pomyśleć, że "Validators.maxLength" będzie sprawdzony identycznym kluczem, zwłaszcza, że ​​kątowy nie boi się osłon wielbłąda gdziekolwiek indziej. Ale myślę, że to pasuje do sprawdzania poprawności HTML5? Tak czy siak, dzięki. –

+0

Prawdziwe pytanie brzmi: dlaczego? Próbuję dodać dynamiczne walidacje, więc teraz muszę zadzwonić do LowerCase, aby przejść z funkcji do klucza błędu? Mam nadzieję, że to przynajmniej spójne. – Greg

8

To naprawdę złapał mnie tak dobrze jak ja dopasowany klucz w moim znaczników do tego, co miałem w kodzie, który jest nieprawidłowy.

Przykładowy kod

password1: ['', [Validators.required, Validators.minLength(8)]],

Próbka Markup

*ngIf="registrationRequest.get('password1').hasError('minlength')"

Uwaga w kodzie to minlength całości małymi literami.