From 74bae91c3acfae60e87c16117103ffca690774cf Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Wed, 25 Nov 2015 19:15:38 +0000 Subject: [PATCH] Rough but working example of displaying server-side validation errors. Needs cleaner patterns/APIs. --- .../components/admin/album-edit/album-edit.ts | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) 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 index 83a40b0..117d538 100644 --- 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 @@ -5,6 +5,8 @@ import { Http, HTTP_BINDINGS, Headers } from 'angular2/http'; import { AlbumDeletePrompt } from '../album-delete-prompt/album-delete-prompt'; import { FormField } from '../form-field/form-field'; +const ContentTypeJson = 'application/json'; + @ng.Component({ selector: 'album-edit' }) @@ -63,10 +65,29 @@ export class AlbumEdit { var albumId = this.originalAlbum.AlbumId; (window).fetch(`/api/albums/${ albumId }/update`, { method: 'put', - headers: { 'Content-Type': 'application/json' }, + headers: { 'Content-Type': ContentTypeJson }, body: JSON.stringify(this.form.value) }).then(response => { - console.log(response); + if (response.status >= 200 && response.status < 300) { + // TODO: Display success message + } else { + if (response.headers.get('Content-Type').indexOf(ContentTypeJson) === 0) { + return response.json().then((responseJson: ValidationResponse) => { + Object.keys(responseJson.ModelErrors).forEach(key => { + responseJson.ModelErrors[key].forEach(errorMessage => { + // TODO: There has to be a better API for this + if (!this.form.controls[key].errors) { + (this.form.controls[key])._errors = {}; + } + + this.form.controls[key].errors[errorMessage] = true; + }); + }); + }); + } else { + // TODO: Display generic 'unknown error' + } + } }); } } @@ -75,3 +96,8 @@ export class AlbumEdit { return /^\d+\.\d+$/.test(control.value) ? null : { Price: true }; } } + +interface ValidationResponse { + Message: string; + ModelErrors: { [key: string]: string[] }; +}