parent
b06f2dcec6
commit
83fab41666
|
@ -1,5 +1,4 @@
|
|||
<!--#docplaster
|
||||
-->
|
||||
<!-- #docplaster -->
|
||||
<!-- #docregion final -->
|
||||
<div class="container">
|
||||
<!-- #docregion edit-div -->
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"description": "Forms",
|
||||
"files":[
|
||||
"!**/*.d.ts",
|
||||
"!**/*.js"
|
||||
]
|
||||
}
|
|
@ -29,7 +29,8 @@ include ../../../../_includes/_util-fns
|
|||
- How to display validation errors to users and enable/disable form controls
|
||||
|
||||
- How to share information across controls with template local variables
|
||||
|
||||
|
||||
[Live Example](/resources/live-examples/forms/ts/src/plnkr.html)
|
||||
.l-main-section
|
||||
:marked
|
||||
## Template-Driven Forms
|
||||
|
@ -97,7 +98,7 @@ figure.image-display
|
|||
|
||||
Create a new file in the app folder called `hero.ts` and give it the following class definition:
|
||||
|
||||
+makeExample('forms/ts/src/app/hero.ts', null, 'hero.ts')
|
||||
+makeExample('forms/ts/src/app/hero.ts', null, 'app/hero.ts')
|
||||
|
||||
:marked
|
||||
It's an anemic model with few requirements and no behavior. Perfect for our demo.
|
||||
|
@ -123,7 +124,7 @@ figure.image-display
|
|||
|
||||
Create a new file called `hero-form.component.ts` and give it the following definition:
|
||||
|
||||
+makeExample('forms/ts/src/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts (v.1)')
|
||||
+makeExample('forms/ts/src/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts')
|
||||
|
||||
:marked
|
||||
There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
|
||||
|
@ -163,7 +164,7 @@ figure.image-display
|
|||
`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', null, 'app.ts')
|
||||
+makeExample('forms/ts/src/app/app.ts', null, 'app/app.ts')
|
||||
|
||||
:marked
|
||||
.l-sub-section
|
||||
|
@ -183,7 +184,7 @@ figure.image-display
|
|||
|
||||
Create a new template file called `hero-form.component.html` and give it the following definition:
|
||||
|
||||
+makeExample('forms/ts/src/app/hero-form.component.html', 'start', 'app/hero-form.component.html (v.1)')
|
||||
+makeExample('forms/ts/src/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
|
||||
|
||||
:marked
|
||||
That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
|
||||
|
|
|
@ -29,7 +29,7 @@ figure
|
|||
Typically, these snippets are excerpts from a running sample application that accompanies the chapter.
|
||||
We can often find a link to a live version of that sample near the top of the chapter ... like this one.
|
||||
|
||||
[Live Example](/docs/_examples/intro/ts/src/plnkr.html)
|
||||
[Live Example](/resources/live-examples/intro/ts/src/plnkr.html)
|
||||
|
||||
This link opens in a browser and runs the sample code supporting this chapter's architecture overview.
|
||||
We can inspect, modify, save, and download the code.
|
||||
|
|
Loading…
Reference in New Issue