Skip to content

Commit 7ac0727

Browse files
SteveSandersonMSSteveSandersonMS
committed
Towards working forms
1 parent dbc17ac commit 7ac0727

File tree

4 files changed

+34
-52
lines changed

4 files changed

+34
-52
lines changed

‎samples/angular/MusicStore/Apis/AlbumsApiController.cs‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -113,8 +113,7 @@ public async Task<ActionResult> CreateAlbum([FromBody]AlbumChangeDto album)
113113
}
114114

115115
[HttpPut("{albumId:int}/update")]
116-
[Authorize("app-ManageStore")]
117-
public async Task<ActionResult> UpdateAlbum(int albumId, [FromBody]AlbumChangeDto album)
116+
public async Task<ActionResult> UpdateAlbum(int albumId, [FromBody] AlbumChangeDto album)
118117
{
119118
if (!ModelState.IsValid)
120119
{

‎samples/angular/MusicStore/Infrastructure/ApiResult.cs‎

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
using Microsoft.AspNet.Mvc;
22
using Microsoft.AspNet.Mvc.ModelBinding;
33
using Newtonsoft.Json;
4-
using System;
54
using System.Collections.Generic;
65
using System.Linq;
76
using System.Threading.Tasks;
@@ -13,16 +12,13 @@ public class ApiResult : ActionResult
1312
public ApiResult(ModelStateDictionary modelState)
1413
: this()
1514
{
16-
if (modelState.Any(m => m.Value.Errors.Count > 0))
15+
if (modelState.Any(m => m.Value.Errors.Any()))
1716
{
1817
StatusCode = 400;
1918
Message = "The model submitted was invalid. Please correct the specified errors and try again.";
2019
ModelErrors = modelState
21-
.SelectMany(m => m.Value.Errors.Select(me => new ModelError
22-
{
23-
FieldName = m.Key,
24-
ErrorMessage = me.ErrorMessage
25-
}));
20+
.Where(m => m.Value.Errors.Any())
21+
.ToDictionary(m => m.Key, m => m.Value.Errors.Select(me => me.ErrorMessage ));
2622
}
2723
}
2824

@@ -40,7 +36,7 @@ public ApiResult()
4036
public object Data { get; set; }
4137

4238
[JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
43-
public IEnumerable<ModelError> ModelErrors { get; set; }
39+
public IDictionary<string, IEnumerable<string>> ModelErrors { get; set; }
4440

4541
public override Task ExecuteResultAsync(ActionContext context)
4642
{
@@ -49,15 +45,7 @@ public override Task ExecuteResultAsync(ActionContext context)
4945
context.HttpContext.Response.StatusCode = StatusCode.Value;
5046
}
5147

52-
var json = new JsonResult(this);
53-
return json.ExecuteResultAsync(context);
54-
}
55-
56-
public class ModelError
57-
{
58-
public string FieldName { get; set; }
59-
60-
public string ErrorMessage { get; set; }
48+
return new ObjectResult(this).ExecuteResultAsync(context);
6149
}
6250
}
6351
}

‎samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@ <h2>Album <small>Edit</small></h2>
22
<hr />
33

44
<form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()">
5-
<form-field label="Artist" [validate]="form.controls.artist">
6-
<select class="form-control" ng-control="artist">
7-
<option value="">-- choose Artist --</option>
5+
<form-field label="Artist" [validate]="form.controls.ArtistId">
6+
<select class="form-control" ng-control="ArtistId">
7+
<option value="0">-- choose Artist --</option>
88
<option *ng-for="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
99
</select>
1010
</form-field>
1111

12-
<form-field label="Genre" [validate]="form.controls.genre">
13-
<select class="form-control" ng-control="genre">
14-
<option value="">-- choose Genre --</option>
12+
<form-field label="Genre" [validate]="form.controls.GenreId">
13+
<select class="form-control" ng-control="GenreId">
14+
<option value="0">-- choose Genre --</option>
1515
<option *ng-for="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
1616
</select>
1717
</form-field>
1818

19-
<form-field label="Title" [validate]="form.controls.title">
20-
<input class="form-control" type="text" ng-control="title">
19+
<form-field label="Title" [validate]="form.controls.Title">
20+
<input class="form-control" type="text" ng-control="Title">
2121
</form-field>
2222

23-
<form-field label="Price" [validate]="form.controls.price">
23+
<form-field label="Price" [validate]="form.controls.Price">
2424
<div class="input-group">
2525
<span class="input-group-addon">$</span>
26-
<input class="form-control" type="text" ng-control="price">
26+
<input class="form-control" type="text" ng-control="Price">
2727
</div>
2828
</form-field>
2929

30-
<form-field label="Album Art URL" [validate]="form.controls.albumArtUrl">
31-
<input class="form-control" ng-control="albumArtUrl">
30+
<form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
31+
<input class="form-control" ng-control="AlbumArtUrl">
3232
</form-field>
3333

3434
<form-field label="Album Art">
35-
<img src="{{ form.controls.albumArtUrl.value }}">
35+
<img src="{{ form.controls.AlbumArtUrl.value }}">
3636
</form-field>
3737

3838
<form-field>

‎samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,15 @@ export class AlbumEdit {
2323
constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) {
2424
this._http = http;
2525

26-
http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
26+
var albumId = parseInt(routeParam.params['albumId']);
27+
http.get('/api/albums/' + albumId).subscribe(result => {
2728
var json = result.json();
2829
this.originalAlbum = json;
29-
(<ng.Control>this.form.controls['title']).updateValue(json.Title);
30-
(<ng.Control>this.form.controls['price']).updateValue(json.Price);
31-
(<ng.Control>this.form.controls['artist']).updateValue(json.ArtistId);
32-
(<ng.Control>this.form.controls['genre']).updateValue(json.GenreId);
33-
(<ng.Control>this.form.controls['albumArtUrl']).updateValue(json.AlbumArtUrl);
30+
(<ng.Control>this.form.controls['Title']).updateValue(json.Title);
31+
(<ng.Control>this.form.controls['Price']).updateValue(json.Price);
32+
(<ng.Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
33+
(<ng.Control>this.form.controls['GenreId']).updateValue(json.GenreId);
34+
(<ng.Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
3435
});
3536

3637
http.get('/api/artists/lookup').subscribe(result => {
@@ -42,11 +43,12 @@ export class AlbumEdit {
4243
});
4344

4445
this.form = fb.group(<any>{
45-
artist: fb.control('', ng.Validators.required),
46-
genre: fb.control('', ng.Validators.required),
47-
title: fb.control('', ng.Validators.required),
48-
price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])),
49-
albumArtUrl: fb.control('', ng.Validators.required)
46+
AlbumId: fb.control(albumId),
47+
ArtistId: fb.control(0, ng.Validators.required),
48+
GenreId: fb.control(0, ng.Validators.required),
49+
Title: fb.control('', ng.Validators.required),
50+
Price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])),
51+
AlbumArtUrl: fb.control('', ng.Validators.required)
5052
});
5153
}
5254

@@ -62,21 +64,14 @@ export class AlbumEdit {
6264
(<any>window).fetch(`/api/albums/${ albumId }/update`, {
6365
method: 'put',
6466
headers: { 'Content-Type': 'application/json' },
65-
body: JSON.stringify({
66-
AlbumArtUrl: controls['albumArtUrl'].value,
67-
AlbumId: albumId,
68-
ArtistId: controls['artist'].value,
69-
GenreId: controls['genre'].value,
70-
Price: controls['price'].value,
71-
Title: controls['title'].value
72-
})
67+
body: JSON.stringify(this.form.value)
7368
}).then(response => {
7469
console.log(response);
7570
});
7671
}
7772
}
7873

7974
private static _validatePrice(control: ng.Control): { [key: string]: boolean } {
80-
return /^\d+\.\d+$/.test(control.value) ? null : { price: true };
75+
return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
8176
}
8277
}

0 commit comments

Comments
 (0)