Validating Angular2 form or not inside component

Question

I am trying to check if the form is valid or not in order to prevent further execution if it is not.

Here is my 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> 

However, when I submit an invalid form, I notice in the console that the actual NgForm attribute is true ...

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

Can someone please let me know why this is?

Answer 1

You make pattern forms. Please refer to this simple 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> 

and then the 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"; } } } 

If you want to move on to more complex dynamic validation, it would be better to convert to Model-Driven Forms. How with this plunk

Answer 2

What is the alleged behavior

I found in the changelog 2.0.0-alpha.46 (2015-11-11)

Previously, the ControlrrterGroup Control Control and ControlArray returned the errors of their direct children. This was confusing because the result did not include nested child errors (ControlGroup → ControlGroup → Control). Creating controls. Errors to include such errors will require inventing some kind of custom serialization format, which applications would have to understand. Since controlsErrors was just a convenience method, and it was embarrassing, we remove it. If you want errors of the whole form to be serialized into one object, you can manually move the form and accumulate errors. This way you have more control over how errors are serialized.

Then the documents for ControlGroup and ControlArray should be updated

See also https://github.com/angular/angular/issues/6504#issuecomment-171950667

You can check if firstNameForm.valid false , and then iterate over the control groups and controls for errors.

The NgForm class has the errors property because it inherits from AbstractControlDirective , but errors from nested controls are not collected there.