Angular 2 with ASP.NET Web API validation

Question

I'm making web application which contains 2 parts:

• Front-end made by Angular 2

• Back-end made by ASP.NET Core Web API.

In back-end service, when the model submitted to service is invalid, I respond ModelState back to client, for example:

{
  "Name": [
    "NAME_MAXLENGTH_EXCEEDED",
    "NAME_FORMAT_INVALID"
  ],
  "Password": [
    "PASSWORD_REQUIRED"
  ]
}

I've read some tutorials about angular 2 form validation, like this:

https://medium.com/@daviddentoom/angular-2-form-validation-9b26f73fcb81#.10trjfzel

But, that tutorial doesn't meet my expectation, I want to exploit the ModelState respond back from client as the structure defined above.

And my html should be like this:

<li *ngFor="let validationError in validationErrors.Name">
   {{validationError}}
</li>

All I want to keep the structure of client model validation is the same as the modelstate in service.

Can anyone help me please ?

Thank you,

Answer 1

With Angular2 and ASP.NET Core Web API things have changed. What you're looking for is Angular2's form validation. There is a good blog post on it here and the angular.io page is a great resource as well. Consider the following (sample borrowed from angular.io):

The markup

<form *ngIf="active" (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 p of powers" [value]="p">{{p}}</option>
        </select>
        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
          Power is required
        </div>
      </div>
      <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
    </form>

The component TypeScript

import { Component } from '@angular/core';
import { Hero }    from './hero';
@Component({
  moduleId: module.id,
  selector: 'hero-form',
  templateUrl: 'hero-form.component.html'
})
export class HeroFormComponent {
  powers = ['Really Smart', 'Super Flexible',
            'Super Hot', 'Weather Changer'];
  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
  submitted = false;
  onSubmit() { this.submitted = true; }
  // Reset the form with a new hero AND restore 'pristine' class state
  // by toggling 'active' flag which causes the form
  // to be removed/re-added in a tick via NgIf
  // TODO: Workaround until NgForm has a reset method (#6822)
  active = true;
  newHero() {
    this.model = new Hero(42, '', '');
    this.active = false;
    setTimeout(() => this.active = true, 0);
  }
}