docs: refactor template-driven forms doc as a tutorial (#36732)

rework content to meet current documentation standards and conventions, structure as tutorial document type PR Close #36732
2020-04-08 14:08:04 -07:00 · 2020-04-08 14:08:04 -07:00 · 382aa50c54
parent 044a19966d
commit 382aa50c54
8 changed files with 269 additions and 468 deletions
--- a/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
+++ b/aio/content/examples/forms/src/app/hero-form/hero-form.component.html
@ -200,13 +200,4 @@
           (ngModelChange)="model.name = $event">
    TODO: remove this: {{model.name}}
  <!-- #enddocregion ngModel-3-->
  <hr>
  <!-- #docregion ngModelName-2 -->
       <input type="text" class="form-control" id="name"
         required
         [(ngModel)]="model.name" name="name"
         #spy>
       <br>TODO: remove this: {{spy.className}}
  <!-- #enddocregion ngModelName-2 -->
 </div>
--- a/aio/content/guide/forms-overview.md
+++ b/aio/content/guide/forms-overview.md
@ -279,11 +279,12 @@ Here are the steps performed in the model to view test.
 To learn more about reactive forms, see the following guides:
-* [Reactive forms](guide/reactive-forms) guide
+* [Reactive forms](guide/reactive-forms)
-* [Form validation](guide/form-validation#reactive-form-validation) guide
+* [Form validation](guide/form-validation#reactive-form-validation)
-* [Building dynamic forms](guide/dynamic-form) tutorial
+* [Dynamic forms](guide/dynamic-form)
 To learn more about template-driven forms, see the following guides:
-* [Building a template-driven form](guide/forms#template-driven-forms) tutorial
+* [Building a template-driven form](guide/forms) tutorial
-* [Form validation](guide/form-validation#template-driven-validation) guide
+* [Form validation](guide/form-validation#template-driven-validation)
 * `NgForm` directive API reference
--- a/aio/content/guide/forms.md
+++ b/aio/content/guide/forms.md
@ -1,389 +1,234 @@
-# Template-driven forms
+# Building a template-driven form
 Forms are the mainstay of business applications.
 You use forms to log in, submit a help request, place an order, book a flight,
 schedule a meeting, and perform countless other data-entry tasks.
 In developing a form, it's important to create a data-entry experience that guides the
 user efficiently and effectively through the workflow.
 <div class="alert is-helpful">
  For the sample app that this page describes, see the <live-example></live-example>.
 </div>
 ## Introduction to Template-driven forms
 Developing forms requires design skills (which are out of scope for this page), as well as framework support for
 *two-way data binding, change tracking, validation, and error handling*,
 which you'll learn about on this page.
 This page shows you how to build a simple form from scratch. Along the way you'll learn how to:
 * Build an Angular form with a component and template.
 * Use `ngModel` to create two-way data bindings for reading and writing input-control values.
 * Track state changes and the validity of form controls.
 * Provide visual feedback using special CSS classes that track the state of the controls.
 * Display validation errors to users and enable/disable form controls.
 * Share information across HTML elements using template reference variables.
 {@a template-driven}
-You can build forms by writing templates in the Angular [template syntax](guide/template-syntax) with
+This tutorial shows you how to create a template-driven form whose control elements are bound to data properties, with input validation to maintain data integrity and styling to improve the user experience.
-the form-specific directives and techniques described in this page.
+
 Template-driven forms use [two-way data binding](guide/architecture-components#data-binding "Intro to 2-way data binding") to update the data model in the component as changes are made in the template and vice versa.
 <div class="alert is-helpful">
-  You can also use a reactive (or model-driven) approach to build forms.
+Angular supports two design approaches for interactive forms. You can build forms by writing templates using Angular [template syntax and directives](guide/glossary#template "Definition of template terms") with the form-specific directives and techniques described in this tutorial, or you can use a reactive (or model-driven) approach to build forms.
-  However, this page focuses on template-driven forms.
+
 Template-driven forms are suitable for small or simple forms, while reactive forms are more scalable and suitable for complex forms.
 For a comparison of the two approaches, see [Introduction to Forms](guide/forms-overview "Overview of Angular forms.")
 </div>
-You can build almost any form with an Angular template&mdash;login forms, contact forms, and pretty much any business form.
+You can build almost any kind of form with an Angular template&mdash;login forms, contact forms, and pretty much any business form.
-You can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
+You can lay out the controls creatively and bind them to the data in your object model.
 You can specify validation rules and display validation errors,
 conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
-Angular makes the process easy by handling many of the repetitive, boilerplate tasks you'd
+This tutorial shows you how to build a form from scratch, using a simplified sample form like the one from the [Tour of Heroes tutorial](tutorial "Tour of Heroes") to illustrate the techniques.
 otherwise wrestle with yourself.
-You'll learn to build a template-driven form that looks like this:
+<div class="alert is-helpful">
  Run or download the example app: <live-example></live-example>.
 </div>
 ## Objectives
 This tutorial teaches you how to do the following:
 * Build an Angular form with a component and template.
 * Use `ngModel` to create two-way data bindings for reading and writing input-control values.
 * Provide visual feedback using special CSS classes that track the state of the controls.
 * Display validation errors to users and enable or disable form controls based on the form status.
 * Share information across HTML elements using [template reference variables](guide/template-syntax#template-reference-variables-var).
 ## Prerequisites
 Before going further into template-driven forms, you should have a basic understanding of the following.
 * TypeScript and HTML5 programming.
 * Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
 * The basics of [Angular template syntax](guide/template-syntax "Template syntax guide").
 * The form-design concepts that are presented in [Introduction to Forms](guide/forms-overview "Overview of Angular forms.").
 {@a intro}
 ## Build a template-driven form
 Template-driven forms rely on directives defined in the `FormsModule`.
 * The `NgModel` directive reconciles value changes in the attached form element with changes in the data model, allowing you to respond to user input with input validation and error handling.
 * The `NgForm` directive creates a top-level `FormGroup` instance and binds it to a `<form>` element to track aggregated form value and validation status.
 As soon as you import `FormsModule`, this directive becomes active by default on all `<form>` tags. You don't need to add a special selector.
 * The `NgModelGroup` directive creates and binds a `FormGroup` instance to a DOM element.
 ### The sample application
 The sample form in this guide is used by the *Hero Employment Agency* to maintain personal information about heroes.
 Every hero needs a job. This form helps the agency match the right hero with the right crisis.
 <div class="lightbox">
  <img src="generated/images/guide/forms/hero-form-1.png" alt="Clean Form">
 </div>
-The *Hero Employment Agency* uses this form to maintain personal information about heroes.
+The form highlights some design features that make it easier to use. For instance, the two required fields have a green bar on the left to make them easy to spot. These fields have initial values, so the form is valid and the **Submit** button is enabled.
 Every hero needs a job. It's the company mission to match the right hero with the right crisis.
-Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
+As you work with this form, you will learn how to include validation logic, how to customize the presentation with standard CSS, and how to handle error conditions to ensure valid input.
-
+If the user deletes the hero name, for example, the form becomes invalid. The app detects the changed status, and displays a validation error in an attention-grabbing style.
-If you delete the hero name, the form displays a validation error in an attention-grabbing style:
+In addition, the **Submit** button is disabled, and the "required" bar to the left of the input control changes from green to red.
 <div class="lightbox">
  <img src="generated/images/guide/forms/hero-form-2.png" alt="Invalid, Name Required">
 </div>
-Note that the *Submit* button is disabled, and the "required" bar to the left of the input control changes from green to red.
+### Step overview
-<div class="alert is-helpful">
+In the course of this tutorial, you bind a sample form to data and handle user input using the following steps.
-  You can customize the colors and location of the "required" bar with standard CSS.
+1. Build the basic form.
   * Define a sample data model.
   * Include required infrastructure such as the `FormsModule`.
 2. Bind form controls to data properties using the `ngModel` directive and two-way data-binding syntax.
   * Examine how `ngModel` reports control states using CSS classes.
   * Name controls to make them accessible to `ngModel`.
 3. Track input validity and control status using `ngModel`.
   * Add custom CSS to provide visual feedback on the status.
   * Show and hide validation-error messages.
 4. Respond to a native HTML button-click event by adding to the model data.
 5. Handle form submission using the [`ngSubmit`(api/forms/NgForm#properties)] output property of the form.
   * Disable the **Submit** button until the form is valid.
   * After submit, swap out the finished form for different content on the page.
-</div>
+{@a step1}
-You'll build this form in small steps:
+## Build the form
-1. Create the `Hero` model class.
+You can recreate the sample application from the code provided here, or you can examine or download the <live-example></live-example>.
 1. Create the component that controls the form.
 1. Create a template with the initial form layout.
 1. Bind data properties to each form control using the `ngModel` two-way data-binding syntax.
 1. Add a `name` attribute to each form-input control.
 1. Add custom CSS to provide visual feedback.
 1. Show and hide validation-error messages.
 1. Handle form submission with *ngSubmit*.
 1. Disable the form’s *Submit* button until the form is valid.
-## Setup
+1. The provided sample application creates the `Hero` class which defines the data model reflected in the form.
 Create a new project named <code>angular-forms</code>:
 <code-example language="sh" class="code-shell">
  ng new angular-forms
 </code-example>
 ## Create the Hero model class
 As users enter form data, you'll capture their changes and update an instance of a model.
 You can't lay out the form until you know what the model looks like.
 A model can be as simple as a "property bag" that holds facts about a thing of application importance.
 That describes well the `Hero` class with its three required fields (`id`, `name`, `power`)
 and one optional field (`alterEgo`).
 Using the Angular CLI command [`ng generate class`](cli/generate), generate a new class named `Hero`:
 <code-example language="sh" class="code-shell">
  ng generate class Hero
 </code-example>
 With this content:
   <code-example path="forms/src/app/hero.ts" header="src/app/hero.ts"></code-example>
-It's an anemic model with few requirements and no behavior. Perfect for the demo.
+2. The form layout and details are defined in the `HeroFormComponent` class.
 The TypeScript compiler generates a public field for each `public` constructor parameter and
 automatically assigns the parameter’s value to that field when you create heroes.
 The `alterEgo` is optional, so the constructor lets you omit it; note the question mark (?) in `alterEgo?`.
 You can create a new hero like this:
 <code-example path="forms/src/app/hero-form/hero-form.component.ts" region="SkyDog"></code-example>
 ## Create a form component
 An Angular form has two parts: an HTML-based _template_ and a component _class_
 to handle data and user interactions programmatically.
 Begin with the class because it states, in brief, what the hero editor can do.
 Using the Angular CLI command [`ng generate component`](cli/generate), generate a new component named `HeroForm`:
 <code-example language="sh" class="code-shell">
  ng generate component HeroForm
 </code-example>
 With this content:
   <code-example path="forms/src/app/hero-form/hero-form.component.ts" header="src/app/hero-form/hero-form.component.ts (v1)" region="v1"></code-example>
-There’s nothing special about this component, nothing form-specific,
+   The component's `selector` value of "app-hero-form" means you can drop this form in a parent
-nothing to distinguish it from any component you've written before.
+template using the `<app-hero-form>` tag.
-Understanding this component requires only the Angular concepts covered in previous pages.
+3. The following code creates a new hero instance, so that the initial form can show an example hero.
-* The code imports the Angular core library and the `Hero` model you just created.
+   <code-example path="forms/src/app/hero-form/hero-form.component.ts" region="SkyDog"></code-example>
 * The `@Component` selector value of "app-hero-form" means you can drop this form in a parent
 template with a `<app-hero-form>` tag.
 * The `templateUrl` property points to a separate file for the template HTML.
 * You defined dummy data for `model` and `powers`, as befits a demo.
-Down the road, you can inject a data service to get and save real data
+   This demo uses dummy data for `model` and `powers`. In a real app, you would inject a data service to get and save real data, or expose these properties as inputs and outputs.
 or perhaps expose these properties as inputs and outputs
 (see [Input and output properties](guide/template-syntax#inputs-outputs) on the
 [Template Syntax](guide/template-syntax) page) for binding to a
 parent component. This is not a concern now and these future changes won't affect the form.
-* You added a `diagnostic` property to return a JSON representation of the model.
+4. The application enables the Forms feature and registers the created form component.
 It'll help you see what you're doing during development; you've left yourself a cleanup note to discard it later.
 ## Revise *app.module.ts*
 `app.module.ts` defines the application's root module. In it you identify the external modules you'll use in the application
 and declare the components that belong to this module, such as the `HeroFormComponent`.
 Because template-driven forms are in their own module, you need to add the `FormsModule` to the array of
 `imports` for the application module before you can use forms.
 Update it with the following:
   <code-example path="forms/src/app/app.module.ts" header="src/app/app.module.ts"></code-example>
-<div class="alert is-helpful">
+5. The form is displayed in the application layout defined by the root component's template.
  There are two changes:
  1. You import `FormsModule`.
  1. You add the `FormsModule` to the list of `imports` defined in the `@NgModule` decorator. This gives the application
  access to all of the template-driven forms features, including `ngModel`.
 </div>
 <div class="alert is-important">
  If a component, directive, or pipe belongs to a module in the `imports` array, _don't_ re-declare it in the `declarations` array.
  If you wrote it and it should belong to this module, _do_ declare it in the `declarations` array.
 </div>
 ## Revise *app.component.html*
 `AppComponent` is the application's root component. It will host the new `HeroFormComponent`.
 Replace the contents of its template with the following:
   <code-example path="forms/src/app/app.component.html" header="src/app/app.component.html"></code-example>
-<div class="alert is-helpful">
+   The initial template defines the layout for a form with two form groups and a submit button.
   The form groups correspond to two properties of the Hero data model, name and alterEgo. Each group has a label and a box for user input.
-  There are only two changes.
+   * The **Name** `<input>` control element has the HTML5 `required` attribute.
-  The `template` is simply the new element tag identified by the component's `selector` property.
+   * The **Alter Ego** `<input>` control element does not because `alterEgo` is optional.
  This displays the hero form when the application component is loaded.
  Don't forget to remove the `name` field from the class body as well.
-</div>
+   The **Submit** button has some classes on it for styling.
   At this point, the form  layout is all plain HTML5, with no bindings or directives.
-## Create an initial HTML form template
+6. The sample form uses some style classes from [Twitter Bootstrap](http://getbootstrap.com/css/): `container`, `form-group`, `form-control`, and `btn`.
-
+   To use these styles, the app's style sheet imports the library.
 Update the template file with the following contents:
 <code-example path="forms/src/app/hero-form/hero-form.component.html" region="start" header="src/app/hero-form/hero-form.component.html"></code-example>
 The language is simply HTML5. You're presenting two of the `Hero` fields, `name` and `alterEgo`, and
 opening them up for user input in input boxes.
 The *Name* `<input>` control has the HTML5 `required` attribute;
 the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
 You added a *Submit* button at the bottom with some classes on it for styling.
 *You're not using Angular yet*. There are no bindings or extra directives, just layout.
 <div class="alert is-helpful">
  In template driven forms, if you've imported `FormsModule`, you don't have to do anything
  to the `<form>` tag in order to make use of `FormsModule`. Continue on to see how this works.
 </div>
 The `container`, `form-group`, `form-control`, and `btn` classes
 come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic.
 Bootstrap gives the form a little style.
 <div class="callout is-important">
  <header>
    Angular forms don't require a style library
  </header>
  Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
  the styles of any external library. Angular apps can use any CSS library or none at all.
 </div>
 To add the stylesheet, open `styles.css` and add the following import line at the top:
   <code-example path="forms/src/styles.1.css" header="src/styles.css"></code-example>
-## Add powers with _*ngFor_
+7. The form makes the hero applicant choose one superpower from a fixed list of agency-approved powers.
-
+   The predefined list of `powers` is part of the data model, maintained internally in `HeroFormComponent`.
-The hero must choose one superpower from a fixed list of agency-approved powers.
+   The Angular [NgForOf directive](api/common/NgForOf "API reference") iterates over the data values to populate the `<select>` element.
 You maintain that list internally (in `HeroFormComponent`).
 You'll add a `select` to the
 form and bind the options to the `powers` list using `ngFor`,
 a technique seen previously in the [Displaying Data](guide/displaying-data) page.
 Add the following HTML *immediately below* the *Alter Ego* group:
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (powers)" region="powers"></code-example>
-This code repeats the `<option>` tag for each power in the list of powers.
+If you run the app right now, you see the list of powers in the selection control. The input elements are not yet bound to data values or events, so they are still blank and have no behavior.
 The `pow` template input variable is a different power in each iteration;
 you display its name using the interpolation syntax.
 {@a ngModel}
 ## Two-way data binding with _ngModel_
 Running the app right now would be disappointing.
 <div class="lightbox">
  <img src="generated/images/guide/forms/hero-form-3.png" alt="Early form with no binding">
 </div>
 {@a ngModel}
-You don't see hero data because you're not binding to the `Hero` yet.
+## Bind input controls to data properties
 You know how to do that from earlier pages.
 [Displaying Data](guide/displaying-data) teaches property binding.
 [User Input](guide/user-input) shows how to listen for DOM events with an
 event binding and how to update a component property with the displayed value.
-Now you need to display, listen, and extract at the same time.
+The next step is to bind the input controls to the corresponding `Hero` properties with two-way data binding, so that they respond to user input by updating the data model, and also respond to programmatic changes in the data by updating the display.
-You could use the techniques you already know, but
+The `ngModel` directive declared in the `FormsModule` lets you bind controls in your template-driven form to properties in your data model.
-instead you'll use the new `[(ngModel)]` syntax, which
+When you include the directive using the  syntax for two-way data binding, `[(ngModel)]`, Angular can track the value and user interaction of the control and keep the view synced with the model.
 makes binding the form to the model easy.
-Find the `<input>` tag for *Name* and update it like this:
+1. Edit the template file `hero-form.component.html`.
 2. Find the `<input>` tag next to the **Name** label.
 3. Add the `ngModel` directive, using two-way data binding syntax `[(ngModel)]="..."`.
 <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-1"></code-example>
 <div class="alert is-helpful">
-  You added a diagnostic interpolation after the input tag
+This example has a temporary diagnostic interpolation after each input tag, `{{model.name}}`, to show the current data value of the corresponding property.
-  so you can see what you're doing.
+The note reminds you to remove the diagnostic lines when you have finished observing the two-way data binding at work.
  You left yourself a note to throw it away when you're done.
 </div>
 Focus on the binding syntax: `[(ngModel)]="..."`.
 You need one more addition to display the data. Declare
 a template variable for the form. Update the `<form>` tag with
 `#heroForm="ngForm"` as follows:
 <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="template-variable"></code-example>
 The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
 <div class="alert is-helpful">
 {@a ngForm}
-  ### The _NgForm_ directive
+### Access the overall form status
-  What `NgForm` directive?
+When you imported the `FormsModule` in your component, Angular automatically created and attached an [NgForm](api/forms/NgForm "API reference for NgForm") directive to the `<form>` tag in the template (because `NgForm` has the selector `form` that matches `<form>` elements).
  You didn't add an [NgForm](api/forms/NgForm) directive.
-  Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
+To get access to the `NgForm` and the overall form status, declare a [template reference variable](guide/template-syntax#template-reference-variables-var).
-  The `NgForm` directive supplements the `form` element with additional features.
+1. Edit the template file `hero-form.component.html`.
  It holds the controls you created for the elements with an `ngModel` directive
  and `name` attribute, and monitors their properties, including their validity.
  It also has its own `valid` property which is true only *if every contained
  control* is valid.
-</div>
+2. Update the `<form>` tag with a template reference variable, `#heroForm`, and set its value as follows.
-If you ran the app now and started typing in the *Name* input box,
+   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="template-variable"></code-example>
-adding and deleting characters, you'd see them appear and disappear
+
-from the interpolated text.
+   The `heroForm` template variable  is now a reference to the `NgForm` directive instance that governs the form as a whole.
-At some point it might look like this:
+
 3. Run the app.
 4. Start typing in the **Name** input box.
  As you add and delete characters, you can see them appear and disappear from the data model.
  For example:
   <div class="lightbox">
     <img src="generated/images/guide/forms/ng-model-in-action.png" alt="ngModel in action">
   </div>
-The diagnostic is evidence that values really are flowing from the input box to the model and
+  The diagnostic line that shows interpolated values demonstrates that values are really flowing from the input box to the model and back again.
 back again.
-<div class="alert is-helpful">
+### Naming control elements
-  That's *two-way data binding*.
+When you use `[(ngModel)]` on an element, you must define a `name` attribute for that element.
-  For more information, see
+Angular uses the assigned name to register the element with the `NgForm` directive attached to the parent `<form>` element.
  [Two-way binding with NgModel](guide/template-syntax#ngModel) on the
  the [Template Syntax](guide/template-syntax) page.
-</div>
+The example added a `name` attribute to the `<input>` element and set it to "name",
 which makes sense for the hero's name.
 Any unique value will do, but using a descriptive name is helpful.
-Notice that you also added a `name` attribute to the `<input>` tag and set it to "name",
+1. Add similar `[(ngModel)]` bindings and `name` attributes to **Alter Ego** and **Hero Power**.
 which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
 Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
-<div class="alert is-helpful">
+2. You can now remove the diagnostic messages that show interpolated values.
-  Internally, Angular creates `FormControl` instances and
+3. To confirm that two-way data binding works for the entire hero model, add a new binding at the top to the component's `diagnostic` property.
  registers them with an `NgForm` directive that Angular attached to the `<form>` tag.
  Each `FormControl` is registered under the name you assigned to the `name` attribute.
  Read more in the previous section, [The NgForm directive](guide/forms#ngForm).
-</div>
+After these revisions, the form template should look like the following:
 Add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*.
 You'll ditch the input box binding message
 and add a new binding (at the top) to the component's `diagnostic` property.
 Then you can confirm that two-way data binding works *for the entire hero model*.
 After revision, the core of the form should look like this:
 <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModel-2"></code-example>
-<div class="alert is-helpful">
+* Notice that each `<input>` element has an `id` property. This is used by the `<label>` element's `for` attribute to match the label to its input control. This is a [standard HTML feature](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
-  * Each input element has an `id` property that is used by the `label` element's `for` attribute
+* Each `<input>` element also has the required `name` property that Angular uses to register the control with the form.
  to match the label to its input control.
  * Each input element has a `name` property that is required by Angular forms to register the control with the form.
 </div>
 If you run the app now and change every hero model property, the form might display like this:
@ -391,18 +236,15 @@ If you run the app now and change every hero model property, the form might disp
  <img src="generated/images/guide/forms/ng-model-in-action-2.png" alt="ngModel in action">
 </div>
-The diagnostic near the top of the form
+The diagnostic near the top of the form confirms that all of your changes are reflected in the model.
 confirms that all of your changes are reflected in the model.
-*Delete* the `{{diagnostic}}` binding at the top as it has served its purpose.
+4. When you have observed the effects, you can delete the `{{diagnostic}}` binding.
-## Track control state and validity with _ngModel_
+## Track control states
-Using `ngModel` in a form gives you more than just two-way data binding. It also tells
+The `NgModel` directive on a control tracks the state of that control.
-you if the user touched the control, if the value changed, or if the value became invalid.
+It tells you if the user touched the control, if the value changed, or if the value became invalid.
-
+Angular sets special CSS classes on the control element to reflect the state, as shown in the following table.
 The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state.
 You can leverage those class names to change the appearance of the control.
 <table>
@ -472,38 +314,32 @@ You can leverage those class names to change the appearance of the control.
 </table>
-Temporarily add a [template reference variable](guide/template-syntax#ref-vars) named `spy`
+You use these CSS classes to define the styles for your control based on its status.
 to the _Name_ `<input>` tag and use it to display the input's CSS classes.
-<code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="ngModelName-2"></code-example>
+### Observe control states
-Now run the app and look at the _Name_ input box.
+To see how the classes are added and removed by the framework, open the browser's developer tools and inspect the `<input>` element that represents the hero name.
 Follow these steps *precisely*:
-1. Look but don't touch.
+1. Using your browser's developer tools, find the  `<input>` element that corresponds to the **Name** input box.
-1. Click inside the name box, then click outside it.
+   You can see that the element has multiple CSS classes in addition to "form-control".
 1. Add slashes to the end of the name.
 1. Erase the name.
-The actions and effects are as follows:
+2. When you first bring it up, the classes indicate that it has a valid value, that the value has not been changed since initialization or reset, and that the control has not been visited since initialization or reset.
-<div class="lightbox">
+   ```
-  <img src="generated/images/guide/forms/control-state-transitions-anim.gif" alt="Control State Transition">
+   <input ... class="form-control ng-untouched ng-pristine ng-valid" ...>
-</div>
+   ```
-You should see the following transitions and class names:
+3. Take the following actions on the **Name** `<input>` box, and observe which classes appear.
   * Look but don't touch. The classes indicate that it is untouched, pristine, and valid.
   * Click inside the name box, then click outside it. The control has now been visited, and the element has the `ng-touched` class instead of the `ng-untouched` class.
   * Add slashes to the end of the name. It is now touched and dirty.
   * Erase the name. This makes the value invalid, so the `ng-invalid` class replaces the `ng-valid` class.
-<div class="lightbox">
+### Create visual feedback for states
  <img src="generated/images/guide/forms/ng-control-class-changes.png" alt="Control state transitions">
 </div>
-The `ng-valid`/`ng-invalid` pair is the most interesting, because you want to send a
+The `ng-valid`/`ng-invalid` pair is particularly interesting, because you want to send a
-strong visual signal when the values are invalid. You also want to mark required fields.
+strong visual signal when the values are invalid.
-To create such visual feedback, add definitions for the `ng-*` CSS classes.
+You also want to mark required fields.
 *Delete* the `#spy` template reference variable and the `TODO` as they have served their purpose.
 ## Add custom CSS for visual feedback
 You can mark required fields and invalid data at the same time with a colored bar
 on the left of the input box:
@ -512,20 +348,25 @@ on the left of the input box:
  <img src="generated/images/guide/forms/validity-required-indicator.png" alt="Invalid Form">
 </div>
-You achieve this effect by adding these class definitions to a new `forms.css` file
+To change the appearance in this way, take the following steps.
-that you add to the project as a sibling to `index.html`:
+
 1. Add definitions for the `ng-*` CSS classes.
 2. Add these class definitions to a new `forms.css` file.
 3. Add the new file to the project as a sibling to `index.html`:
   <code-example path="forms/src/assets/forms.css" header="src/assets/forms.css"></code-example>
-Update the `<head>` of `index.html` to include this style sheet:
+4. In the `index.html` file, update the `<head>` tag to include the new style sheet.
   <code-example path="forms/src/index.html" header="src/index.html (styles)" region="styles"></code-example>
-## Show and hide validation error messages
+### Show and hide validation error messages
-You can improve the form. The _Name_ input box is required and clearing it turns the bar red.
+The **Name** input box is required and clearing it turns the bar red.
-That says something is wrong but the user doesn't know *what* is wrong or what to do about it.
+That indicates that something is wrong, but the user doesn't know what is wrong or what to do about it.
-Leverage the control's state to reveal a helpful message.
+You can provide a helpful message by checking for and responding to the control's state.
 When the user deletes the name, the form should look like this:
@ -533,166 +374,135 @@ When the user deletes the name, the form should look like this:
  <img src="generated/images/guide/forms/name-required-error.png" alt="Name required">
 </div>
-To achieve this effect, extend the `<input>` tag with the following:
+The **Hero Power** select box is also required, but it doesn't need this kind of error handling because the selection box already constrains the selection to valid values.
-* A [template reference variable](guide/template-syntax#ref-vars).
+To define and show an error message when appropriate, take the following steps.
 * The "*is required*" message in a nearby `<div>`, which you'll display only if the control is invalid.
-Here's an example of an error message added to the _name_ input box:
+1. Extend the `<input>` tag with a template reference variable that you can use to access the input box's Angular control from within the template. In the example, the variable is `#name="ngModel"`.
 <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="name-with-error-msg"></code-example>
 You need a template reference variable to access the input box's Angular control from within the template.
 Here you created a variable called `name` and gave it the value "ngModel".
   <div class="alert is-helpful">
-  Why "ngModel"?
+     The template reference variable (`#name`) is set to `"ngModel"` because that is the value of the [`NgModel.exportAs`](api/core/Directive#exportAs) property. This property tells Angular how to link a reference variable to a directive.
  A directive's [exportAs](api/core/Directive) property
  tells Angular how to link the reference variable to the directive.
  You set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
   </div>
-You control visibility of the name error message by binding properties of the `name`
+2. Add a `<div>` that contains a suitable error message.
 3. Show or hide the error message by binding properties of the `name`
 control to the message `<div>` element's `hidden` property.
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (hidden-error-msg)" region="hidden-error-msg"></code-example>
-In this example, you hide the message when the control is valid or pristine;
+4. Add a conditional error message to the _name_ input box, as in the following example.
 "pristine" means the user hasn't changed the value since it was displayed in this form.
-This user experience is the developer's choice. Some developers want the message to display at all times.
+   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="name-with-error-msg"></code-example>
 <div class="callout is-helpful">
 <header>Illustrating the "pristine" state</header>
 In this example, you hide the message when the control is either valid or *pristine*.
 Pristine means the user hasn't changed the value since it was displayed in this form.
 If you ignore the `pristine` state, you would hide the message only when the value is valid.
 If you arrive in this component with a new (blank) hero or an invalid hero,
 you'll see the error message immediately, before you've done anything.
-Some developers want the message to display only when the user makes an invalid change.
+You might want the message to display only when the user makes an invalid change.
-Hiding the message while the control is "pristine" achieves that goal.
+Hiding the message while the control is in the `pristine` state achieves that goal.
-You'll see the significance of this choice when you add a new hero to the form.
+You'll see the significance of this choice when you add a new hero to the form in the next step.
-The hero *Alter Ego* is optional so you can leave that be.
+</div>
-Hero *Power* selection is required.
+## Add a new hero
 You can add the same kind of error handling to the `<select>` if you want,
 but it's not imperative because the selection box already constrains the
 power to valid values.
-Now you'll add a new hero in this form.
+This exercise shows how you can respond to a native HTML button-click event by adding to the model data.
-Place a *New Hero* button at the bottom of the form and bind its click event to a `newHero` component method.
+To let form users add a new hero, you will add a **New Hero** button that responds to a click event.
-<code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-no-reset" header="src/app/hero-form/hero-form.component.html (New Hero button)"></code-example>
+1. In the template, place a "New Hero" `<button>` element at the bottom of the form.
 2. In the component file, add the hero-creation method to the hero data model.
   <code-example path="forms/src/app/hero-form/hero-form.component.ts" region="new-hero" header="src/app/hero-form/hero-form.component.ts (New Hero method)"></code-example>
-Run the application again, click the *New Hero* button, and the form clears.
+3. Bind the button's click event to a hero-creation method, `newHero()`.
 The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
 That's understandable as these are required fields.
 The error messages are hidden because the form is pristine; you haven't changed anything yet.
-Enter a name and click *New Hero* again.
+   <code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-no-reset" header="src/app/hero-form/hero-form.component.html (New Hero button)"></code-example>
 The app displays a _Name is required_ error message.
 You don't want error messages when you create a new (empty) hero.
 Why are you getting one now?
-Inspecting the element in the browser tools reveals that the *name* input box is _no longer pristine_.
+4. Run the application again and click the **New Hero** button.
 The form remembers that you entered a name before clicking *New Hero*.
 Replacing the hero object *did not restore the pristine state* of the form controls.
-You have to clear all of the flags imperatively, which you can do
+   The form clears, and the *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
-by calling the form's `reset()` method after calling the `newHero()` method.
+   Notice that the error messages are hidden. This is because the form is pristine; you haven't changed anything yet.
 5. Enter a name and click **New Hero** again.
   Now the app displays a _Name is required_ error message, because the input box is no longer pristine.
   The form remembers that you entered a name before clicking **New Hero**.
 6. To restore the pristine state of the form controls, clear all of the flags imperatively by calling the form's `reset()` method after calling the `newHero()` method.
   <code-example path="forms/src/app/hero-form/hero-form.component.html" region="new-hero-button-form-reset" header="src/app/hero-form/hero-form.component.html (Reset the form)"></code-example>
-Now clicking "New Hero" resets both the form and its control flags.
+   Now clicking **New Hero** resets both the form and its control flags.
 <div class="alert is-helpful">
 See the [User Input](guide/user-input) guide for more information about listening for DOM events with an event binding and updating a corresponding component property.
 </div>
 ## Submit the form with _ngSubmit_
 The user should be able to submit this form after filling it in.
-The *Submit* button at the bottom of the form
+The **Submit** button at the bottom of the form does nothing on its own, but it does
-does nothing on its own, but it will
+trigger a form-submit event because of its type (`type="submit"`).
-trigger a form submit because of its type (`type="submit"`).
+To respond to this event, take the following steps.
-A "form submit" is useless at the moment.
+1. Bind the form's [`ngSubmit`](api/forms/NgForm#properties) event property to the hero-form component's `onSubmit()` method.
 To make it useful, bind the form's `ngSubmit` event property
 to the hero form component's `onSubmit()` method:
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (ngSubmit)" region="ngSubmit"></code-example>
-You'd already defined a template reference variable,
+2. Use the template reference variable, `#heroForm` to access the form that contains the **Submit** button and create an event binding.
-`#heroForm`, and initialized it with the value "ngForm".
+You will bind the form property that indicates its overall validity to the **Submit** button's `disabled` property.
 Now, use that variable to access the form with the Submit button.
 You'll bind the form's overall validity via
 the `heroForm` variable to the button's `disabled` property
 using an event binding. Here's the code:
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (submit-button)" region="submit-button"></code-example>
-If you run the application now, you find that the button is enabled&mdash;although
+3. Run the application now. Notice that the button is enabled&mdash;although
 it doesn't do anything useful yet.
-Now if you delete the Name, you violate the "required" rule, which
+4. Delete the **Name** value. This violates the "required" rule, so it displays the error message&emdash;and notice that it also disables the **Submit** button.
 is duly noted in the error message.
 The *Submit* button is also disabled.
 Not impressed?  Think about it for a moment. What would you have to do to
 wire the button's enable/disabled state to the form's validity without Angular's help?
-For you, it was as simple as this:
+   You didn't have to explicitly wire the button's enabled state to the form's validity.
   The `FormsModule` did this automatically when you defined a template reference variable on the enhanced form element, then referred to that variable in the button control.
-1. Define a template reference variable on the (enhanced) form element.
+### Respond to form submission
 2. Refer to that variable in a button many lines away.
-## Toggle two form regions (extra credit)
+To show a response to form submission, you can hide the data entry area and display something else in its place.
-Submitting the form isn't terribly dramatic at the moment.
+1. Wrap the entire form in a `<div>` and bind
 <div class="alert is-helpful">
  An unsurprising observation for a demo. To be honest,
  jazzing it up won't teach you anything new about forms.
  But this is an opportunity to exercise some of your newly won
  binding skills.
  If you aren't interested, skip to this page's conclusion.
 </div>
 For a more strikingly visual effect,
 hide the data entry area and display something else.
 Wrap the form in a `<div>` and bind
 its `hidden` property to the `HeroFormComponent.submitted` property.
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="edit-div"></code-example>
-The main form is visible from the start because the
+   * The main form is visible from the start because the `submitted` property is false until you submit the form, as this fragment from the `HeroFormComponent` shows:
 `submitted` property is false until you submit the form,
 as this fragment from the `HeroFormComponent` shows:
      <code-example path="forms/src/app/hero-form/hero-form.component.ts" header="src/app/hero-form/hero-form.component.ts (submitted)" region="submitted"></code-example>
-When you click the *Submit* button, the `submitted` flag becomes true and the form disappears
+   * When you click the **Submit** button, the `submitted` flag becomes true and the form disappears.
 as planned.
-Now the app needs to show something else while the form is in the submitted state.
+2. To show something else while the form is in the submitted state, add the following HTML below the new `<div>` wrapper.
 Add the following HTML below the `<div>` wrapper you just wrote:
   <code-example path="forms/src/app/hero-form/hero-form.component.html" header="src/app/hero-form/hero-form.component.html (excerpt)" region="submitted"></code-example>
-There's the hero again, displayed read-only with interpolation bindings.
+   This `<div>`, which shows a read-only hero with interpolation bindings, appears only while the component is in the submitted state.
 This `<div>` appears only while the component is in the submitted state.
-The HTML includes an *Edit* button whose click event is bound to an expression
+   The alternative display includes an *Edit* button whose click event is bound to an expression
 that clears the `submitted` flag.
-When you click the *Edit* button, this block disappears and the editable form reappears.
+3. Click the *Edit* button to switch the display back to the editable form.
 ## Summary
 The Angular form discussed in this page takes advantage of the following
-framework features to provide support for data modification, validation, and more:
+framework features to provide support for data modification, validation, and more.
 * An Angular HTML form template.
 * A form component class with a `@Component` decorator.
@ -700,8 +510,8 @@ framework features to provide support for data modification, validation, and mor
 * Template-reference variables such as `#heroForm` and `#name`.
 * `[(ngModel)]` syntax for two-way data binding.
 * The use of `name` attributes for validation and form-element change tracking.
-* The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
+* The reference variable’s `valid` property on input controls to check if a control is valid and show or hide error messages.
-* Controlling the *Submit* button's enabled state by binding to `NgForm` validity.
+* Controlling the **Submit** button's enabled state by binding to `NgForm` validity.
 * Custom CSS classes that provide visual feedback to users about invalid controls.
 Here’s the code for the final version of the application:
@ -741,4 +551,3 @@ Here’s the code for the final version of the application:
  </code-pane>
 </code-tabs>
--- a/aio/content/images/guide/forms/control-state-transitions-anim.gif
+++ b/aio/content/images/guide/forms/control-state-transitions-anim.gif
--- a/aio/content/images/guide/forms/ng-control-class-changes.png
+++ b/aio/content/images/guide/forms/ng-control-class-changes.png
--- a/aio/content/navigation.json
+++ b/aio/content/navigation.json
@ -254,11 +254,6 @@
              "title": "Reactive Forms",
              "tooltip": "Create a reactive form using FormBuilder, groups, and arrays."
            },
            {
              "url": "guide/forms",
              "title": "Template-driven Forms",
              "tooltip": "Create a template-driven form using directives and Angular template syntax."
            },
            {
              "url": "guide/form-validation",
              "title": "Validate form input",
@ -749,6 +744,11 @@
          "url": "guide/router-tutorial",
          "title": "Using Angular Routes in a Single-page Application",
          "tooltip": "A tutorial that covers many patterns associated with Angular routing."
        },
        {
          "url": "guide/forms",
          "title": "Building a Template-driven Form",
          "tooltip": "Create a template-driven form using directives and Angular template syntax."
        }
      ]
    },