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

Preparing to move the ASP.NET MVC validation result client-side code into a separate NPM module

Browse Source
This commit is contained in:
SteveSandersonMS
2015-12-09 18:25:09 +00:00
parent 906a17ea3c
commit 2261c9964e
2 changed files with 42 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/AspNetUtil.ts Normal file
View File

@@ -0,0 +1,32 @@
import { ControlGroup } from 'angular2/angular2';
import { Response } from 'angular2/http';
// TODO: Factor this out into a separate NPM module
export class Validation {
public static showValidationErrors(response: ValidationErrorResult | Response, controlGroup: ControlGroup): void {
if (response instanceof Response) {
var httpResponse = <Response>response;
response = <ValidationErrorResult>(httpResponse.json());
}
// It's not yet clear whether this is a legitimate and supported use of the ng.ControlGroup API.
// Need feedback from the Angular 2 team on whether there's a better way.
var errors = <ValidationErrorResult>response;
Object.keys(errors || {}).forEach(key => {
errors[key].forEach(errorMessage => {
// This in particular is rough
if (!controlGroup.controls[key].errors) {
(<any>controlGroup.controls[key])._errors = {};
}
controlGroup.controls[key].errors[errorMessage] = true;
});
});
}
}
export interface ValidationErrorResult {
[propertyName: string]: string[];
}

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

@@ -4,6 +4,7 @@ import * as models from '../../../models/models';
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';
import * as AspNet from './AspNetUtil';
@ng.Component({
selector: 'album-edit'
@@ -67,21 +68,11 @@ export class AlbumEdit {
var controls = this.form.controls;
var albumId = this.originalAlbum.AlbumId;
this._putJson(`/api/albums/${ albumId }/update`, this.form.value).then(response => {
this._putJson(`/api/albums/${ albumId }/update`, this.form.value).subscribe(response => {
if (response.status === 200) {
this.changesSaved = true;
} else {
var errors = <ValidationResponse>(response.json());
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) {
(<any>this.form.controls[key])._errors = {};
}
this.form.controls[key].errors[errorMessage] = true;
});
});
AspNet.Validation.showValidationErrors(response, this.form);
}
});
}
@@ -91,15 +82,15 @@ export class AlbumEdit {
return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
}
private _putJson(url: string, body: any): Promise<Response> {
return new Promise((resolve, reject) => {
this._http.put(url, JSON.stringify(body), {
headers: new Headers({ 'Content-Type': 'application/json' })
}).subscribe(resolve);
// Need feedback on whether this really is the easiest way to PUT some JSON
private _putJson(url: string, body: any): Subscribable<Response> {
return this._http.put(url, JSON.stringify(body), {
headers: new Headers({ 'Content-Type': 'application/json' })
});
}
}
interface ValidationResponse {
[propertyName: string]: string[];
// TODO: Figure out what type declaration is provided by Angular/RxJs and use that instead
interface Subscribable<T> {
subscribe(callback: (response: Response) => void): void;
}