(docs) forms: fill gaps in the instructions that make this a complete sample (including app.ts)
This commit is contained in:
Ward Bell
parent
5be67b7212
commit
faf0057d3a
|
|
@ -7,20 +7,18 @@
|
|||
<!-- #docregion bootstrap -->
|
||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
||||
<!-- #enddocregion bootstrap -->
|
||||
<!-- #docregion styles -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- #docregion libraries -->
|
||||
<!-- #enddocregion styles -->
|
||||
|
||||
<script src="../node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
|
||||
<!-- #enddocregion libraries -->
|
||||
<!-- #docregion systemjs -->
|
||||
<script>
|
||||
System.config({
|
||||
packages: {'app': {defaultExtension: 'js'}}
|
||||
});
|
||||
System.import('app/app');
|
||||
</script>
|
||||
<!-- #enddocregion systemjs -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, bootstrap} from 'angular2/angular2';
|
||||
import {bootstrap, Component} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// #docregion
|
||||
import {Component, bootstrap} from 'angular2/angular2';
|
||||
import {bootstrap, Component} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<br>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 `<head>` 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
|
||||
```
|
||||
Loading…
Reference in New Issue