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 index 393f80b..f32b27a 100644 --- 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 @@ -36,6 +36,7 @@ +
Done! Your changes were saved.
Back to List 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 117d538..6119d9f 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 @@ -1,12 +1,10 @@ import * as ng from 'angular2/angular2'; import * as router from 'angular2/router'; import * as models from '../../../models/models'; -import { Http, HTTP_BINDINGS, Headers } from 'angular2/http'; +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'; -const ContentTypeJson = 'application/json'; - @ng.Component({ selector: 'album-edit' }) @@ -19,6 +17,7 @@ export class AlbumEdit { public artists: models.Artist[]; public genres: models.Genre[]; public originalAlbum: models.Album; + public changesSaved: boolean; private _http: Http; @@ -52,6 +51,10 @@ export class AlbumEdit { Price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])), AlbumArtUrl: fb.control('', ng.Validators.required) }); + + this.form.valueChanges.observer({ + next: _ => { this.changesSaved = false; } + }); } public onSubmitModelBased() { @@ -63,30 +66,22 @@ export class AlbumEdit { if (this.form.valid) { var controls = this.form.controls; var albumId = this.originalAlbum.AlbumId; - (window).fetch(`/api/albums/${ albumId }/update`, { - method: 'put', - headers: { 'Content-Type': ContentTypeJson }, - body: JSON.stringify(this.form.value) - }).then(response => { - if (response.status >= 200 && response.status < 300) { - // TODO: Display success message + + this._putJson(`/api/albums/${ albumId }/update`, this.form.value).then(response => { + if (response.status === 200) { + this.changesSaved = true; } 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; - }); - }); + var errors = ((response.json())).ModelErrors; + 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) { + (this.form.controls[key])._errors = {}; + } + + this.form.controls[key].errors[errorMessage] = true; }); - } else { - // TODO: Display generic 'unknown error' - } + }); } }); } @@ -95,6 +90,14 @@ export class AlbumEdit { private static _validatePrice(control: ng.Control): { [key: string]: boolean } { return /^\d+\.\d+$/.test(control.value) ? null : { Price: true }; } + + private _putJson(url: string, body: any): Promise { + return new Promise((resolve, reject) => { + this._http.put(url, JSON.stringify(body), { + headers: new Headers({ 'Content-Type': 'application/json' }) + }).subscribe(resolve); + }); + } } interface ValidationResponse {