Verifica se un modulo Angular2 è valido o no all'interno del componente

Question

Sto provando a verificare se un modulo è valido o meno per impedire ulteriori esecuzioni se non lo è.

Qui è la mia forma:

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

Tuttavia, quando presento un form non valido, ho notato nella console che l'attributo valida di NgForm è true ...

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

Può chiunque per favore fatemi sapere perché questo è il caso?

Answer 1

Si stanno facendo moduli basati su modelli. Si prega di fare riferimento a questo semplice 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> 

e poi il controller:

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

} 

Se si desidera spostare a convalida dinamica più complessa allora sarebbe meglio convertire al modello Form guidato. Come con questo plunk

Answer 2

Questo è il comportamento previsto

ho trovato nel registro delle modifiche per 2.0.0-alpha.46 (2015-11-11)

In precedenza, il getter controlsErrors di controllo alimentati e ControlArray restituito il errori dei loro figli diretti. Ciò era fonte di confusione perché il risultato non includeva gli errori dei bambini nidificati (ControlGroup -> ControlGroup -> Control). Esecuzione di controlli Gli errori per includere tali errori richiederebbero l'invenzione di alcuni formati di serializzazione personalizzati, che le applicazioni dovrebbero comprendere. Poiché controlsErrors era solo un metodo di convenienza, e causava confusione, lo stiamo rimuovendo. Se si desidera ottenere gli errori dell'intero modulo serializzato in un singolo oggetto, è possibile attraversare manualmente il modulo e accumulare gli errori. In questo modo hai più controllo su come gli errori sono serializzati.

Poi la documentazione per ControlGroup e ControlArray dovrebbero essere aggiornati

Vedi anche https://github.com/angular/angular/issues/6504#issuecomment-171950667

È possibile verificare se è firstNameForm.validfalse e poi iterare i gruppi di controllo e controlli per gli errori.

La classe NgForm ha la proprietà errors perché eredita da AbstractControlDirective ma gli errori da controlli nidificati che non sono raccolte lì.