Угловое 2 с проверкой Web API ASP.NET

Question

Я делаю веб-приложение, которое содержит 2 части:

• Интерфейсные сделанные Угловое 2

• Back-конец, сделанное ASP.NET Core Web API.

В серверной службе, когда модель представляется в службу недействительна, я отвечаю ModelState обратно клиенту, например:

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

Я прочитал некоторые учебники о угловой проверке 2 вида , как это:

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

Но, что учебник не отвечает мои ожидания, я хочу, чтобы эксплуатировать ModelState реагировать обратно от клиента, описанной выше.

И мой HTML должен выглядеть так:

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

Все, что я хочу, чтобы сохранить структуру проверки модели клиент является такой же, как ModelState в обслуживании.

Может ли кто-нибудь мне помочь?

Спасибо,

Answer 1

С Angular2 и ASP.NET Web API ядра вещи изменились. То, что вы ищете, это Angular2's форма проверки. На нем есть хорошая запись в блоге here, а страница angular.io - отличный ресурс. Рассмотрим следующий (образец заимствованные из angular.io):

Разметка

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

Компонент машинопись

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

Answer 2

Сделать Угловое услугу, которая делает запись в задний конец и возвращает обратно ошибку список объектов-сообщений. Ваш шаблон углового компонента затем перебирает список, как вы указали.