角2的ASP.NET Web API驗證

我做它包含兩個部分Web應用程序：角2的ASP.NET Web API驗證

前端通過角2
後端製造由ASP.NET製作核心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。

任何人都可以幫助我嗎？

謝謝

來源

2016-10-12 Redplane

Angular2如何提供.net web api（服務器端）驗證？你能澄清你的觀點嗎？ – micronyks

@micronyks對不起我的問題，我已經更新了:) – Redplane

隨着Angular2和ASP.NET核心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>

組件打字稿

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

來源

2016-10-12 12:02:07

做一個角度的服務，做後到後端並返回錯誤 - 消息對象列表。您的角度組件模板然後在您提供的列表上迭代。

來源

2017-11-02 17:59:56 RMuesi

角2的ASP.NET Web API驗證

回答

相關問題