github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-23 01:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Towards working forms

Browse Source
This commit is contained in:
SteveSandersonMS
2015-11-25 17:44:32 +00:00
parent dbc17acc62
commit 7ac0727813
4 changed files with 34 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.html
View File

@@ -2,37 +2,37 @@
<hr />
<form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()">
<form-field label="Artist" [validate]="form.controls.artist">
<select class="form-control" ng-control="artist">
<option value="">-- choose Artist --</option>
<form-field label="Artist" [validate]="form.controls.ArtistId">
<select class="form-control" ng-control="ArtistId">
<option value="0">-- choose Artist --</option>
<option *ng-for="#artist of artists" [value]="artist.ArtistId">{{ artist.Name }}</option>
</select>
</form-field>
<form-field label="Genre" [validate]="form.controls.genre">
<select class="form-control" ng-control="genre">
<option value="">-- choose Genre --</option>
<form-field label="Genre" [validate]="form.controls.GenreId">
<select class="form-control" ng-control="GenreId">
<option value="0">-- choose Genre --</option>
<option *ng-for="#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">
<form-field label="Title" [validate]="form.controls.Title">
<input class="form-control" type="text" ng-control="Title">
</form-field>
<form-field label="Price" [validate]="form.controls.price">
<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" ng-control="Price">
</div>
</form-field>
<form-field label="Album Art URL" [validate]="form.controls.albumArtUrl">
<input class="form-control" ng-control="albumArtUrl">
<form-field label="Album Art URL" [validate]="form.controls.AlbumArtUrl">
<input class="form-control" ng-control="AlbumArtUrl">
</form-field>
<form-field label="Album Art">
<img src="{{ form.controls.albumArtUrl.value }}">
<img src="{{ form.controls.AlbumArtUrl.value }}">
</form-field>
<form-field>

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

@@ -23,14 +23,15 @@ export class AlbumEdit {
constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) {
this._http = http;
http.get('/api/albums/' + routeParam.params['albumId']).subscribe(result => {
var albumId = parseInt(routeParam.params['albumId']);
http.get('/api/albums/' + albumId).subscribe(result => {
var json = result.json();
this.originalAlbum = json;
(<ng.Control>this.form.controls['title']).updateValue(json.Title);
(<ng.Control>this.form.controls['price']).updateValue(json.Price);
(<ng.Control>this.form.controls['artist']).updateValue(json.ArtistId);
(<ng.Control>this.form.controls['genre']).updateValue(json.GenreId);
(<ng.Control>this.form.controls['albumArtUrl']).updateValue(json.AlbumArtUrl);
(<ng.Control>this.form.controls['Title']).updateValue(json.Title);
(<ng.Control>this.form.controls['Price']).updateValue(json.Price);
(<ng.Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
(<ng.Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<ng.Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
});
http.get('/api/artists/lookup').subscribe(result => {
@@ -42,11 +43,12 @@ export class AlbumEdit {
});
this.form = fb.group(<any>{
artist: fb.control('', ng.Validators.required),
genre: fb.control('', ng.Validators.required),
title: fb.control('', ng.Validators.required),
price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])),
albumArtUrl: fb.control('', ng.Validators.required)
AlbumId: fb.control(albumId),
ArtistId: fb.control(0, ng.Validators.required),
GenreId: fb.control(0, ng.Validators.required),
Title: fb.control('', ng.Validators.required),
Price: fb.control('', ng.Validators.compose([ng.Validators.required, AlbumEdit._validatePrice])),
AlbumArtUrl: fb.control('', ng.Validators.required)
});
}
@@ -62,14 +64,7 @@ export class AlbumEdit {
(<any>window).fetch(`/api/albums/${ albumId }/update`, {
method: 'put',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
AlbumArtUrl: controls['albumArtUrl'].value,
AlbumId: albumId,
ArtistId: controls['artist'].value,
GenreId: controls['genre'].value,
Price: controls['price'].value,
Title: controls['title'].value
})
body: JSON.stringify(this.form.value)
}).then(response => {
console.log(response);
});
@@ -77,6 +72,6 @@ export class AlbumEdit {
}
private static _validatePrice(control: ng.Control): { [key: string]: boolean } {
return /^\d+\.\d+$/.test(control.value) ? null : { price: true };
return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
}
}