CODEWITHSUNDEEP
angularvalidation
ChaoticNadirs
ChaoticNadirs

Reputation: 2290

Angular 2 template driven form - validation summary

I am trying to provide a validation summary for a template driven form in angular. When the form is invalid I would like to list the validation errors so that the user knows which inputs to fix.

So far I added this code to try and display the validation errors

<pre>{{heroForm.form.errors | json}}</pre>
<ul>
  <li *ngFor="let error of heroForm.form.errors">
    {{error}}
  </li>
</ul>

Is this possible from a template driven form?

heroForm.form.errors remains null, even when there are validation errors on the form.

My actual form is more complex, but I can use the angular tour of heroes tutorial as an example:

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine"
         class="alert alert-danger">
      Name is required
    </div>
  </div>
  <div class="form-group">
    <label for="alterEgo">Alter Ego</label>
    <input type="text" class="form-control" id="alterEgo"
           [(ngModel)]="model.alterEgo" name="alterEgo">
  </div>
  <div class="form-group">
    <label for="power">Hero Power</label>
    <select class="form-control" id="power"
            required
            [(ngModel)]="model.power" name="power"
            #power="ngModel">
      <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
    </select>
    <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
      Power is required
    </div>
  </div>
  <pre>{{heroForm.form.errors | json}}</pre>
  <ul>
    <li *ngFor="let error of heroForm.form.errors">
      {{error}}
    </li>
  </ul>
  <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
  <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
</form>

Upvotes: 2

Views: 2087

Answers (2)

Ritesh Kulkarni
Ritesh Kulkarni

Reputation: 129

If your page has controls on grid with validation applied, try below code -

getFormErrors(): void {
    let keys: Array<string> = Object.keys(this.myForm.controls);

    this.formErrors.splice(0, this.formErrors.length);

    keys.forEach((k: any) => {
      if (this.myForm.controls[k].errors) {

        if (this.myForm.controls[k].errors.required) {
          this.formErrors.push(`${k} is required`);
        }

        if (this.myForm.controls[k].errors.pattern) {
          this.formErrors.push(`${k} has an invalid value`);
        }

      }
    });
  }

and call this method on any event like Save or Submit

And in template -

<div class="row" *ngIf="myForm.submitted">
    <div class="text">Validation errors summary</div>
    <div class="alert alert-danger" style="font-size: 12px;" >

      <ul>
        <li *ngFor="let error of formErrors">
         <span *ngIf="error!=''">{{error}}</span>
        </li>
      </ul>
    </div>
  </div>

Note myForm is the defined as below

<form #myForm="ngForm" (ngSubmit)="Save()>

Upvotes: 0

macav
macav

Reputation: 1482

i assume the problem is that the errors are not on the form itself, but on the controls within the form. you would have to loop through the heroForm.form.controls and show the errors on each control

EDIT: Not template driven, but more testable and makes the template clean, you just iterate over this:

get formErrors() {
    return Object.keys(this.form.controls).map(key => {
      const errors = this.form.controls[key].errors;
      if (errors === null) { return null; }
      if (errors.required) {
        return `${key} is required`;
      } else {
        return `${key} has an unknown error`;
      }
    });
  }

Template:

<div *ngFor="let error of formErrors">
  {{error}}
</div>

Upvotes: 3

Related Questions