@@ -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