diff --git a/public/docs/_examples/forms/ts/src/index.html b/public/docs/_examples/forms/ts/src/index.html
index 2aa0229ab4..42fa6ee681 100644
--- a/public/docs/_examples/forms/ts/src/index.html
+++ b/public/docs/_examples/forms/ts/src/index.html
@@ -7,20 +7,18 @@
+
-
-
+
+
-
-
-
diff --git a/public/docs/_examples/quickstart/ts/src/app.ts b/public/docs/_examples/quickstart/ts/src/app.ts
index e34a9804be..f036ae5e45 100644
--- a/public/docs/_examples/quickstart/ts/src/app.ts
+++ b/public/docs/_examples/quickstart/ts/src/app.ts
@@ -1,5 +1,5 @@
// #docregion
-import {Component, bootstrap} from 'angular2/angular2';
+import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'my-app',
diff --git a/public/docs/_examples/quickstart/ts/src/app/app.ts b/public/docs/_examples/quickstart/ts/src/app/app.ts
index e34a9804be..f036ae5e45 100644
--- a/public/docs/_examples/quickstart/ts/src/app/app.ts
+++ b/public/docs/_examples/quickstart/ts/src/app/app.ts
@@ -1,5 +1,5 @@
// #docregion
-import {Component, bootstrap} from 'angular2/angular2';
+import {bootstrap, Component} from 'angular2/angular2';
@Component({
selector: 'my-app',
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 6aabb05601..ac62010289 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -81,9 +81,11 @@ figure.image-display
1. Show and hide validation error messages
1. Handle form submission with **ng-submit**
1. Disable the form’s submit button until the form is valid
-
-.l-main-section
+
:markdown
+ ## Setup
+ Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
+
## Create the Hero Model Class
As users enter form data, we capture their changes and update an instance of a model.
@@ -152,6 +154,27 @@ figure.image-display
We made a good choice to put the HTML template elsewhere. Let's write it.
+.l-main-section
+:markdown
+ ## Revise the *app.ts*
+
+ `app.ts` is the application's root component. It will host our new `HeroFormComponent`.
+
+ Replace the contents of the "QuickStart" version with the following:
++makeExample('forms/ts/src/app/app.ts')
+
+:markdown
+.l-sub-section
+ :markdown
+ There are only three changes:
+
+ 1. We import the new `HeroFormComponent`.
+
+ 1. The `template` is simply the new element tag identified by the component's `select` property.
+
+ 1. The `directives` array tells Angular that our templated depends upon the `HeroFormComponent`
+ which is itself a Directive (as are all Components).
+
.l-main-section
:markdown
## Create an initial HTML Form Template
@@ -186,7 +209,7 @@ figure.image-display
npm install bootstrap
:markdown
Open the `index.html` and add the following line wherever we like to put our CSS
- +makeExample('forms/ts/src/index.html', 'bootstrap')
+ +makeExample('forms/ts/src/index.html', 'bootstrap')(format=".")
.callout.is-important
header Angular Forms Does Not Require A Style Library
@@ -400,10 +423,15 @@ figure.image-display
img(src="/resources/images/devguide/forms/validity-required-indicator.png" alt="Invalid Form")
:markdown
- We achieve this effect by adding two CSS styles to our `styles.css` file
- that select for the Angular validity classes and the HTML 5 "required" attribute:
-
+ We achieve this effect by adding two styles to a new `styles.css` file
+ that we add to our project as a sibling to `index.html`.
+
+makeExample('forms/ts/src/styles.css')
+:markdown
+ These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
+
+ We update the `` of the `index.html` to include this style sheet.
++makeExample('forms/ts/src/index.html', 'styles')(format=".")
:markdown
## Show and Hide Validation Error messages
@@ -570,10 +598,33 @@ figure.image-display
Here’s the final version of the application includes all of these framework features:
-
-+makeTabs('forms/ts/src/app/hero-form.component.html, '+
- 'forms/ts/src/app/hero-form.component.ts , '+
- 'forms/ts/src/app/hero.ts',
- 'final, final,',
- 'hero-form.component.html, hero-form.component.ts, hero.ts')
++makeTabs(
+ `forms/ts/src/app/hero-form.component.html,
+ forms/ts/src/app/hero-form.component.ts,
+ forms/ts/src/app/hero.ts,
+ forms/ts/src/app/app.ts,
+ forms/ts/src/index.html,
+ forms/ts/src/styles.css`,
+ 'final, final,,,,',
+ `hero-form.component.html,
+ hero-form.component.ts,
+ hero.ts,
+ app.ts,
+ index.html,
+ styles.css`)
:markdown
+ Our final project folder structure should look like this:
+ ```
+ angular2-forms
+ ├── node_modules
+ ├── src
+ │ ├── app
+ │ | ├── app.ts
+ │ | ├── hero.ts
+ │ | ├── hero-form.component.html
+ │ | └── hero-form.component.ts
+ │ ├── index.html
+ │ ├── styles.css
+ │ └── tsconfig.json
+ └── package.json
+ ```
\ No newline at end of file