github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rough but working example of displaying server-side validation errors. Needs cleaner patterns/APIs.

Browse Source
This commit is contained in:
SteveSandersonMS
2015-11-25 19:15:38 +00:00
parent 7ac0727813
commit 74bae91c3a
1 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts
View File

@@ -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;
(<any>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) {
(<any>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[] };
}