Überprüfen, ob ein Angular2-Formular innerhalb der Komponente gültig ist oder nicht

Question

Ich versuche zu überprüfen, ob ein Formular gültig ist oder nicht, um eine weitere Ausführung zu verhindern, wenn dies nicht der Fall ist.

Hier ist meine Form:

<form (ngSubmit)="updateFirstName(firstNameForm)" #firstNameForm="ngForm" novalidate> 
    <div class="form-group" ng-class="getCssClasses(formCtrl, formCtrl.firstName)"> 
     <div class="input-group"> 
      <input type="text" 
        ngControl="firstName" 
        #firstName="ngForm" 
        required 
        minlength="2" 
        maxlength="35" 
        pattern_="FIRST_NAME_PATTERN" 
        [ngModel]="currentUserAccount?.firstName" 
        (ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null" 
        placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}" 
        class="form-control"/> 
     </div> 

     <div [hidden]="firstName.valid"> 
      <div *ngIf="firstName?.errors?.minlength" class="control-label">{{'FIRST_NAME_FORM.MIN_LENGTH'| translate}}</div> 
     </div> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-primary pull-right" [disabled]="buttonDisabled">{{'FIRST_NAME_FORM.SUBMIT'| translate}}</button> 
     <a [routerLink]="['/dashboard/useraccount']" class="btn btn-link pull-right text-right">{{'FORM_CANCEL' | translate}}</a> 
    </div> 
</form> 

Allerdings, wenn ich eine ungültige Form einreichen, die ich in der Konsole feststellen, dass das gültige Attribut NgFormtrue ist ...

updateFirstName(firstNameForm) { 
    console.log(firstNameForm);//the valid attribute of firstNameForm is true... 
} 

Kann jemand Bitte lassen Sie mich wissen, warum dies der Fall ist?

Answer 1

Sie machen vorlagengesteuerte Formulare. Bitte beziehen Sie sich auf diese einfache plunk

<h1>Employee Form</h1> 
<form #personForm="ngForm" (submit)="personFormSubmit(personForm)" novalidate> 
    <div> 
     <div> 
      <input id="nameInput" type="text" name="name" 
        ngControl="name" 
        required 
        minlength="2" 
        maxlength="35" 
        [(ngModel)]="person.name" /> 
     </div> 
    </div> 
    <div> 
     <button type="submit">Submit</button> 
    </div> 
    <div style="color: red">{{validationMessage}}</div> 
</form> 

und dann den Regler:

import { Component } from '@angular/core'; 
import { FORM_DIRECTIVES, ControlGroup, Control, Validators, FormBuilder, Validator, } from '@angular/common'; 
import 'rxjs/Rx'; 

export class Person { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    directives: [FORM_DIRECTIVES], 
    templateUrl: 'app/app.component.html' 
}) 
export class AppComponent { 

    person: Person; 
    validationMessage: string; 

    constructor() { 
     this.person = new Person(); 
     this.validationMessage = ""; 
    } 

    personFormSubmit(personForm: ControlGroup) { 
     if (personForm.valid) { 
      this.validationMessage = "Form Is Valid"; 
     } 
     else 
     { 
      this.validationMessage = "Form Is Not Valid"; 
     } 
    } 

} 

Wenn Sie komplexere dynamische Validierung bewegen wollen, dann wäre es besser, zu konvertieren angetrieben Formen zu modellieren. Wie ist dies plunk

Answer 2

Das ist das beabsichtigte Verhalten

ich für 2.0.0-alpha.46 im Änderungsprotokoll gefunden (2015-11-11)

Zuvor hatte die controlsErrors Getter der Kontrollgruppe und ControlArray kehrte die Fehler ihrer direkten Kinder. Dies war verwirrend, da das Ergebnis nicht die Fehler verschachtelter Kinder (ControlGroup -> ControlGroup -> Control) enthielt. Damit controlsErrors solche Fehler enthalten, müsste man ein benutzerdefiniertes Serialisierungsformat erfinden, das die Anwendungen verstehen müssten. Da controlsErrors nur eine bequeme Methode war und verwirrend war, entfernen wir es. Wenn Sie möchten, dass die Fehler des gesamten Formulars in ein einzelnes Objekt serialisiert werden, können Sie das Formular manuell durchlaufen und die Fehler akkumulieren. Auf diese Weise haben Sie mehr Kontrolle darüber, wie die Fehler serialisiert werden.

Dann werden die Dokumente für ControlGroup und ControlArray sollte

Siehe auch https://github.com/angular/angular/issues/6504#issuecomment-171950667

Sie aktualisiert werden, können überprüfen, ob firstNameForm.validfalse ist und dann die Kontrollgruppen und Kontrollen für Fehler wiederholen.

Die Klasse NgForm hat die Eigenschaft errors, weil sie von AbstractControlDirective erbt, aber die Fehler von verschachtelten Steuerelementen dort nicht erfasst werden.