parent
b06f2dcec6
commit
83fab41666
|
@ -1,5 +1,4 @@
|
||||||
<!--#docplaster
|
<!-- #docplaster -->
|
||||||
-->
|
|
||||||
<!-- #docregion final -->
|
<!-- #docregion final -->
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- #docregion edit-div -->
|
<!-- #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 display validation errors to users and enable/disable form controls
|
||||||
|
|
||||||
- How to share information across controls with template local variables
|
- How to share information across controls with template local variables
|
||||||
|
|
||||||
|
[Live Example](/resources/live-examples/forms/ts/src/plnkr.html)
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Template-Driven Forms
|
## 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:
|
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
|
:marked
|
||||||
It's an anemic model with few requirements and no behavior. Perfect for our demo.
|
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:
|
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
|
:marked
|
||||||
There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
|
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`.
|
`app.ts` is the application's root component. It will host our new `HeroFormComponent`.
|
||||||
|
|
||||||
Replace the contents of the "QuickStart" version with the following:
|
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
|
:marked
|
||||||
.l-sub-section
|
.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:
|
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
|
:marked
|
||||||
That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
|
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.
|
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.
|
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.
|
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.
|
We can inspect, modify, save, and download the code.
|
||||||
|
|
Loading…
Reference in New Issue