Move from ValidationErrorResult to HttpBadRequest, and support object-level errors too

SteveSandersonMS · SteveSandersonMS · commit 8a148d853570 · 2015-12-14T12:02:41.000Z
diff --git a/Microsoft.AspNet.AngularServices/npm/src/Validation.ts b/Microsoft.AspNet.AngularServices/npm/src/Validation.ts
@@ -14,16 +14,19 @@ export class Validation {
         var errors = <ValidationErrorResult>response;
         Object.keys(errors || {}).forEach(key => {
             errors[key].forEach(errorMessage => {
-                // This in particular is rough
-                if (!controlGroup.controls[key].errors) {
-                    (<any>controlGroup.controls[key])._errors = {};
+                // If there's a specific control for this key, then use it. Otherwise associate the error
+                // with the whole control group.
+                var control = controlGroup.controls[key] || controlGroup;
+                
+                // This is rough. Need to find out if there's a better way, or if this is even supported.
+                if (!control.errors) {
+                    (<any>control)._errors = {};
                 }
                 
-                controlGroup.controls[key].errors[errorMessage] = true;
+                control.errors[errorMessage] = true;
             });
         });
     }
-
 }
 
 export interface ValidationErrorResult {
diff --git a/Microsoft.AspNet.SpaServices/ValidationErrorResult.cs b/Microsoft.AspNet.SpaServices/ValidationErrorResult.cs
diff --git a/samples/angular/MusicStore/Apis/AlbumsApiController.cs b/samples/angular/MusicStore/Apis/AlbumsApiController.cs
@@ -1,4 +1,6 @@
-﻿using System.Linq;
+﻿using System.ComponentModel.DataAnnotations;
+using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using Microsoft.AspNet.Authorization;
 using Microsoft.AspNet.Mvc;
@@ -118,7 +120,7 @@ public async Task<ActionResult> UpdateAlbum(int albumId, [FromBody] AlbumChangeD
             if (!ModelState.IsValid)
             {
                 // Return the model errors
-                return new ValidationErrorResult(ModelState);
+                return HttpBadRequest(ModelState);
             }
 
             var dbAlbum = await _storeContext.Albums.SingleOrDefaultAsync(a => a.AlbumId == albumId);
@@ -165,7 +167,7 @@ public async Task<ActionResult> DeleteAlbum(int albumId)
     }
 
     [ModelMetadataType(typeof(Album))]
-    public class AlbumChangeDto
+    public class AlbumChangeDto : IValidatableObject
     {
         public int GenreId { get; set; }
 
@@ -176,6 +178,21 @@ public class AlbumChangeDto
         public decimal Price { get; set; }
 
         public string AlbumArtUrl { get; set; }
+
+        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
+        {
+            // An example of object-level (i.e., multi-property) validation
+            if (this.GenreId == 13 /* Indie */) {
+                switch (SentimentAnalysis.GetSentiment(Title)) {
+                    case SentimentAnalysis.SentimentResult.Positive:
+                        yield return new ValidationResult("Sounds too positive. Indie music requires more ambiguity.");
+                        break;
+                    case SentimentAnalysis.SentimentResult.Negative:
+                        yield return new ValidationResult("Sounds too negative. Indie music requires more ambiguity.");
+                        break;
+                }
+            }
+        }
     }
 
     public class AlbumResultDto : AlbumChangeDto
diff --git a/samples/angular/MusicStore/Apis/Models/SentimentAnalysis.cs b/samples/angular/MusicStore/Apis/Models/SentimentAnalysis.cs
@@ -0,0 +1,38 @@
+using System.Linq;
+using System.Text.RegularExpressions;
+
+namespace MusicStore.Models
+{
+    // Obviously this is not a serious sentiment analyser. It is only here to provide an amusing demonstration of cross-property
+    // validation in AlbumsApiController.
+    public static class SentimentAnalysis
+    {
+        private static string[] positiveSentimentWords = new[] { "happy", "fun", "joy", "love", "delight", "bunny", "bunnies", "asp.net" };
+        
+        private static string[] negativeSentimentWords = new[] { "sad", "pain", "despair", "hate", "scorn", "death", "package management" };
+        
+        public static SentimentResult GetSentiment(string text) {
+            var numPositiveWords = CountWordOccurrences(text, positiveSentimentWords);
+            var numNegativeWords = CountWordOccurrences(text, negativeSentimentWords);
+            if (numPositiveWords > numNegativeWords) {
+                return SentimentResult.Positive;
+            } else if (numNegativeWords > numPositiveWords) {
+                return SentimentResult.Negative;
+            } else {
+                return SentimentResult.Neutral;
+            }
+        }
+
+        private static int CountWordOccurrences(string text, string[] words)
+        {
+            // Very simplistic matching technique for this sample. Not scalable and not really even correct.
+            return new Regex(string.Join("|", words), RegexOptions.IgnoreCase).Matches(text).Count;
+        }
+
+        public enum SentimentResult {
+            Negative,
+            Neutral,
+            Positive,
+        }
+    }
+}
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html
@@ -37,6 +37,7 @@ <h2>Album <small>Edit</small></h2>
 
     <form-field>
         <div *ng-if="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
+        <div *ng-for="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
         <button type="submit" class="btn btn-primary">Submit</button>
         <button type="button" class="btn btn-danger" (click)="deleteprompt.show(originalAlbum)">Delete</button>
         <a class="btn btn-default" [router-link]="['/Admin/Albums']">Back to List</a>
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
@@ -69,7 +69,7 @@ export class AlbumEdit {
             var albumId = this.originalAlbum.AlbumId;
             
             this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(response => {
-                if (response.ok) {
+                if (response.status === 200) {
                     this.changesSaved = true;
                 } else {
                     AspNet.Validation.showValidationErrors(response, this.form);
@@ -88,6 +88,10 @@ export class AlbumEdit {
             headers: new Headers({ 'Content-Type': 'application/json' })
         });
     }
+    
+    public get formErrors() {
+        return Object.keys(this.form.errors || {});
+    }
 }
 
 // TODO: Figure out what type declaration is provided by Angular/RxJs and use that instead
