Make the edit form and delete dialog work again

SteveSandersonMS · SteveSandersonMS · commit ea4c668a6349 · 2016-01-26T11:17:01.000Z
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
@@ -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 = (<any>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
+        (<any>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
@@ -1,34 +1,34 @@
 <h2>Album <small>Edit</small></h2>
 <hr />
 
-<form class="form-horizontal" [ngFormModel]="form" (ng-submit)="onSubmitModelBased()">
+<form class="form-horizontal" [ngFormModel]="form" (ngSubmit)="onSubmitModelBased()">
     <form-field label="Artist" [validate]="form.controls.ArtistId">
-        <select class="form-control" ng-control="ArtistId">
+        <select class="form-control" ngControl="ArtistId">
             <option value="0">-- choose Artist --</option>
             <option *ngFor="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
         </select>
     </form-field>
     
     <form-field label="Genre" [validate]="form.controls.GenreId">
-        <select class="form-control" ng-control="GenreId">
+        <select class="form-control" ngControl="GenreId">
             <option value="0">-- choose Genre --</option>
             <option *ngFor="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
         </select>
     </form-field>
     
     <form-field label="Title" [validate]="form.controls.Title">
-        <input class="form-control" type="text" ng-control="Title">
+        <input class="form-control" type="text" ngControl="Title">
     </form-field>
     
     <form-field label="Price" [validate]="form.controls.Price">
         <div class="input-group">
             <span class="input-group-addon">$</span>
-            <input class="form-control" type="text" ng-control="Price">
+            <input class="form-control" type="text" ngControl="Price">
         </div>
     </form-field>
 
     <form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
-        <input class="form-control" ng-control="AlbumArtUrl">
+        <input class="form-control" ngControl="AlbumArtUrl">
     </form-field>
     
     <form-field label="Album Art">
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
@@ -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<Response> {
+    private _putJson(url: string, body: any): Observable<Response> {
         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<T> {
-    subscribe(callback: (response: Response) => void): void;
-}
+    private ngDoCheck() {
+        this.formErrors = this.form.dirty ? Object.keys(this.form.errors || {}) : [];
+    }
+}
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
@@ -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;
         });
     }
