github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-24 02:30:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update to Angular 2 Beta 1. New bug: no longer waits for server-side HTTP requests to complete - waiting for info to resolve this.

Browse Source
This commit is contained in:
SteveSandersonMS
2016-01-25 15:13:30 +00:00
parent f44b84f2ab
commit 381b7b884e
32 changed files with 113 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,18 @@
<h2>Album <small>Edit</small></h2>
<hr />
<form class="form-horizontal" [ng-form-model]="form" (ng-submit)="onSubmitModelBased()">
<form class="form-horizontal" [ngFormModel]="form" (ng-submit)="onSubmitModelBased()">
<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>
<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">
<option value="0">-- choose Genre --</option>
<option *ng-for="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
<option *ngFor="#genre of genres" [value]="genre.GenreId">{{ genre.Name }}</option>
</select>
</form-field>
@@ -36,11 +36,11 @@
</form-field>
<form-field>
<div *ng-if="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
<div *ng-for="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
<div *ngIf="changesSaved" class="alert alert-success"><b>Done!</b> Your changes were saved.</div>
<div *ngFor="#errorMessage of formErrors" class="alert alert-danger">{{ errorMessage }}</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" (click)="deleteprompt.show(originalAlbum)">Delete</button>
<a class="btn btn-default" [router-link]="['/Admin/Albums']">Back to List</a>
<a class="btn btn-default" [routerLink]="['/Admin/Albums']">Back to List</a>
</form-field>
</form>

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

@@ -1,4 +1,5 @@
import * as ng from 'angular2/angular2';
import * as ng from 'angular2/core';
import { Control, ControlGroup, FormBuilder, Validators, NgIf, NgFor, FORM_DIRECTIVES } from 'angular2/common';
import * as router from 'angular2/router';
import * as models from '../../../models/models';
import { Http, HTTP_BINDINGS, Headers, Response } from 'angular2/http';
@@ -11,10 +12,10 @@ import * as AspNet from 'angular2-aspnet';
})
@ng.View({
templateUrl: './ng-app/components/admin/album-edit/album-edit.html',
directives: [router.ROUTER_DIRECTIVES, ng.NgIf, ng.NgFor, AlbumDeletePrompt, FormField, ng.FORM_DIRECTIVES]
directives: [router.ROUTER_DIRECTIVES, NgIf, NgFor, AlbumDeletePrompt, FormField, FORM_DIRECTIVES]
})
export class AlbumEdit {
public form: ng.ControlGroup;
public form: ControlGroup;
public artists: models.Artist[];
public genres: models.Genre[];
public originalAlbum: models.Album;
@@ -22,18 +23,18 @@ export class AlbumEdit {
private _http: Http;
constructor(fb: ng.FormBuilder, http: Http, routeParam: router.RouteParams) {
constructor(fb: FormBuilder, http: Http, routeParam: router.RouteParams) {
this._http = http;
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['ArtistId']).updateValue(json.ArtistId);
(<ng.Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<ng.Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
(<Control>this.form.controls['Title']).updateValue(json.Title);
(<Control>this.form.controls['Price']).updateValue(json.Price);
(<Control>this.form.controls['ArtistId']).updateValue(json.ArtistId);
(<Control>this.form.controls['GenreId']).updateValue(json.GenreId);
(<Control>this.form.controls['AlbumArtUrl']).updateValue(json.AlbumArtUrl);
});
http.get('/api/artists/lookup').subscribe(result => {
@@ -46,15 +47,15 @@ export class AlbumEdit {
this.form = fb.group(<any>{
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)
ArtistId: fb.control(0, Validators.required),
GenreId: fb.control(0, Validators.required),
Title: fb.control('', Validators.required),
Price: fb.control('', Validators.compose([Validators.required, AlbumEdit._validatePrice])),
AlbumArtUrl: fb.control('', Validators.required)
});
this.form.valueChanges.observer({
next: _ => { this.changesSaved = false; }
this.form.valueChanges.subscribe(() => {
this.changesSaved = false;
});
}
@@ -78,7 +79,7 @@ export class AlbumEdit {
}
}
private static _validatePrice(control: ng.Control): { [key: string]: boolean } {
private static _validatePrice(control: Control): { [key: string]: boolean } {
return /^\d+\.\d+$/.test(control.value) ? null : { Price: true };
}