diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts index 65d1b44..4ec4ed7 100644 --- a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts +++ b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-delete-prompt/album-delete-prompt.ts @@ -10,17 +10,15 @@ import * as models from '../../../models/models'; directives: [NgIf] }) export class AlbumDeletePrompt { - private modalElement: any; public album: models.Album; - constructor(@ng.Inject(ng.ElementRef) elementRef: ng.ElementRef) { - if (typeof window !== 'undefined') { - this.modalElement = (window).jQuery(".modal", elementRef.nativeElement); - } + constructor(@ng.Inject(ng.ElementRef) private _elementRef: ng.ElementRef) { } public show(album: models.Album) { this.album = album; - this.modalElement.modal(); + + // Consider rewriting this using Angular 2's "Renderer" API so as to avoid direct DOM access + (window).jQuery(".modal", this._elementRef.nativeElement).modal(); } } 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 4ddd173..655fd93 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 @@ -1,34 +1,34 @@

Album Edit


-
+ - - - +
$ - +
- + 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 c6d6b8f..1b48765 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,4 +1,5 @@ import * as ng from 'angular2/core'; +import { Observable } from 'rxjs'; import { Control, ControlGroup, FormBuilder, Validators, NgIf, NgFor, FORM_DIRECTIVES } from 'angular2/common'; import * as router from 'angular2/router'; import * as models from '../../../models/models'; @@ -20,6 +21,7 @@ export class AlbumEdit { public genres: models.Genre[]; public originalAlbum: models.Album; public changesSaved: boolean; + public formErrors: string[] = []; private _http: Http; @@ -69,12 +71,10 @@ export class AlbumEdit { var controls = this.form.controls; var albumId = this.originalAlbum.AlbumId; - this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(response => { - if (response.status === 200) { - this.changesSaved = true; - } else { - AspNet.Validation.showValidationErrors(response, this.form); - } + this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(successResponse => { + this.changesSaved = true; + }, errorResponse => { + AspNet.Validation.showValidationErrors(errorResponse, this.form); }); } } @@ -84,18 +84,13 @@ export class AlbumEdit { } // Need feedback on whether this really is the easiest way to PUT some JSON - private _putJson(url: string, body: any): Subscribable { + private _putJson(url: string, body: any): Observable { return this._http.put(url, JSON.stringify(body), { headers: new Headers({ 'Content-Type': 'application/json' }) }); } - - public get formErrors(): string[] { - return this.form.dirty ? Object.keys(this.form.errors || {}) : []; - } -} -// TODO: Figure out what type declaration is provided by Angular/RxJs and use that instead -interface Subscribable { - subscribe(callback: (response: Response) => void): void; -} + private ngDoCheck() { + this.formErrors = this.form.dirty ? Object.keys(this.form.errors || {}) : []; + } +} \ No newline at end of file diff --git a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts index 99c1d00..1ad4dcc 100644 --- a/samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts +++ b/samples/angular/MusicStore/wwwroot/ng-app/components/admin/form-field/form-field.ts @@ -10,11 +10,12 @@ import { NgIf, NgFor, AbstractControl } from 'angular2/common'; directives: [NgIf, NgFor] }) export class FormField { + public errorMessages: string[] = []; private validate: AbstractControl; - - public get errorMessages() { + + private ngDoCheck() { var errors = (this.validate && this.validate.dirty && this.validate.errors) || {}; - return Object.keys(errors).map(key => { + this.errorMessages = Object.keys(errors).map(key => { return 'Error: ' + key; }); }