带有 ASP.NET Web API 验证的 Angular 2答案

【问题标题】：Angular 2 with ASP.NET Web API validation带有 ASP.NET Web API 验证的 Angular 2
【发布时间】：2017-02-21 02:05:23
【问题描述】：

我正在制作包含 2 个部分的 Web 应用程序：

Angular 2 制作的前端
由 ASP.NET Core Web API 制作的后端。

在后端服务中，当提交给服务的模型无效时，我将ModelState返回给客户端，例如：

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

我已经阅读了一些关于 Angular 2 表单验证的教程，如下所示：

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

但是，该教程不符合我的期望，我想利用上面定义的结构从客户端返回的 ModelState 响应。

而我的html应该是这样的：

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

我只想保持客户端模型验证的结构与服务中的模型状态相同。

谁能帮帮我？

谢谢，

【问题讨论】：

Angular2如何提供.net web api（服务器端）验证？你能在这里澄清你的观点吗？？？
@micronyks 抱歉我的问题不清楚，我已经更新了 :)

标签： angular asp.net-core asp.net-core-webapi

【解决方案1】：

创建一个 Angular 服务，将 post 发送到后端并返回错误消息对象列表。然后，您的 Angular 组件模板会按照您提供的方式遍历列表。

【讨论】：

【解决方案2】：

使用 Angular2 和 ASP.NET Core Web API，情况发生了变化。您正在寻找的是 Angular2 的 表单验证。 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>

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

【讨论】：