Preparing to move the ASP.NET MVC validation result client-side code into a separate NPM module

SteveSandersonMS · SteveSandersonMS · commit 2261c9964e3a · 2015-12-09T18:25:09.000Z
diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/AspNetUtil.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/AspNetUtil.ts
@@ -0,0 +1,32 @@
+import { ControlGroup } from 'angular2/angular2';
+import { Response } from 'angular2/http';
+
+// TODO: Factor this out into a separate NPM module
+export class Validation {
+    
+    public static showValidationErrors(response: ValidationErrorResult | Response, controlGroup: ControlGroup): void {
+        if (response instanceof Response) {
+            var httpResponse = <Response>response;
+            response = <ValidationErrorResult>(httpResponse.json());
+        }
+        
+        // It's not yet clear whether this is a legitimate and supported use of the ng.ControlGroup API.
+        // Need feedback from the Angular 2 team on whether there's a better way. 
+        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 = {};
+                }
+                
+                controlGroup.controls[key].errors[errorMessage] = true;
+            });
+        });
+    }
+
+}
+
+export interface ValidationErrorResult {
+    [propertyName: string]: string[];
+}
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
@@ -4,6 +4,7 @@ import * as models from '../../../models/models';
 import { Http, HTTP_BINDINGS, Headers, Response } from 'angular2/http';
 import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt';
 import { FormField } from '../form-field/form-field';
+import * as AspNet from './AspNetUtil';
 
 @ng.Component({
     selector: 'album-edit'
@@ -67,21 +68,11 @@ export class AlbumEdit {
             var controls = this.form.controls;
             var albumId = this.originalAlbum.AlbumId;
             
-            this._putJson(`/api/albums/${ albumId }/update`, this.form.value).then(response => {
+            this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(response => {
                 if (response.status === 200) {
                     this.changesSaved = true;
                 } else {
-                    var errors = <ValidationResponse>(response.json());
-                    Object.keys(errors).forEach(key => {
-                        errors[key].forEach(errorMessage => {
-                            // TODO: There has to be a better API for this
-                            if (!this.form.controls[key].errors) {
-                                (<any>this.form.controls[key])._errors = {};
-                            }
-                            
-                            this.form.controls[key].errors[errorMessage] = true;
-                        });
-                    });
+                    AspNet.Validation.showValidationErrors(response, this.form);
                 }
             });
         }
@@ -91,15 +82,15 @@ export class AlbumEdit {
         return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
     }
     
-    private _putJson(url: string, body: any): Promise<Response> {
-        return new Promise((resolve, reject) => {
-            this._http.put(url, JSON.stringify(body), {
-                headers: new Headers({ 'Content-Type': 'application/json' })
-            }).subscribe(resolve);
+    // Need feedback on whether this really is the easiest way to PUT some JSON
+    private _putJson(url: string, body: any): Subscribable<Response> {
+        return this._http.put(url, JSON.stringify(body), {
+            headers: new Headers({ 'Content-Type': 'application/json' })
         });
     }
 }
 
-interface ValidationResponse {
-    [propertyName: string]: string[];
+// TODO: Figure out what type declaration is provided by Angular/RxJs and use that instead
+interface Subscribable<T> {
+    subscribe(callback: (response: Response) => void): void;
 }
