Angular2 FormBuilder - zwei Validatoren funktionieren nicht

Question

Ich habe eine Texteingabe, die erforderlich sein sollte und länger als 3 Zeichen. Wenn ich darauf klicke, mache nichts (tippe etwas kürzer als 3 Zeichen) und klicke auf, dann füge ich einen roten Rahmen hinzu, sonst wird der Rahmen grün.

export class RegisterpageComponent implements OnInit { 

      userForm: any; 

      constructor(private formBuilder: FormBuilder) { 
      this.userForm = formBuilder.group({ 
       login: ["", Validators.required, Validators.minLength(3)] 
      } 
     ) 
    } 

Hier verbinde ich oben formBuilder mit Formular und Validatoren mit Eingabe.

<form [ngFormModel]="userForm" (ngSubmit)="..."> 
    <input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" /> 
. 
. 
. 
</form> 

sass

input.ng-invalid.ng-touched 
    border-left: 5px solid red 

input.ng-valid.ng-touched 
    border-left: 5px solid green 

Problem ist hier (ich glaube) login: ["", Validators.required, Validators.minLength(3)]

1 *. Wenn ich auf Eingabe klicke, lasse es leer, indem ich ausklicke, dann habe ich einen roten Rahmen - gut. Das Problem ist, dass der Rahmen rot ist, egal was ich mache, auch wenn der Inhalt der Eingabe länger als 3 Zeichen ist. Warum?

2 *. Mit Login Validator als login: ["", Validators.minLength(3)], wenn ich auf Eingabe klicken, lassen Sie es leer, indem Sie aus, dann habe ich grünen Rand. Warum? Roter Rahmen ist, wenn der Inhalt der Eingabe länger als 3 Zeichen ist (hier arbeitet der Validierer)

3 *. Mit Login-Validator als ["", Validators.minLength(3)] und HTML-Code wie <input class="..." type="text" placeholder="..." ngControl="login" #login="ngForm" required /> habe ich endlich was ich wollte - wenn ich auf Eingabe klicke, lasse es leer durch Anklicken - roter Rahmen (gut), wenn ich etwas länger als 3 Zeichen eintippe - grüne Umrandung (gut) . Warum funktioniert 2 * nicht so?

Schließlich - was ist die ["" als der erste Parameter der Validatoren gesetzt? Danke Jungs!

Answer 1

Versuchen Sie, die nächste:

this.userForm = formBuilder.group({ 
    login: ["", Validators.compose([ Validators.required, Validators.minLength(3) ]) 
});