Question

我正在制作包含两部分的网络应用程序：

由Angular 2制作的前端
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>

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

有人可以帮我吗？

谢谢，

Answer 1

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

Answer 2

创建一个Angular服务，用于执行post to back end并返回错误消息对象列表。然后，您的角度组件模板会按照您提供的方式迭代列表。

Angular 2使用ASP.NET Web API验证

2 个答案: