diff --git a/public/docs/_examples/forms/ts/app/hero-form.component.html b/public/docs/_examples/forms/ts/app/hero-form.component.html index 0df80c1247..19d717cd5b 100644 --- a/public/docs/_examples/forms/ts/app/hero-form.component.html +++ b/public/docs/_examples/forms/ts/app/hero-form.component.html @@ -36,7 +36,7 @@ required [(ngModel)]="model.power" name="power" #power="ngModel" > - +
Power is required @@ -46,12 +46,18 @@ - - + - - + + with reset + +    + + + + without reset +

@@ -126,7 +132,7 @@
@@ -165,7 +171,7 @@
@@ -178,12 +184,12 @@
- + TODO: remove this: {{model.name}} - +

- - - - - - - -
` tag for each power in the list of Powers. - The `p` template input variable is a different power in each iteration; + The `pow` template input variable is a different power in each iteration; we display its name using the interpolation syntax with the double-curly-braces. .l-main-section :marked - ## Two-way data binding with **ngModel** + ## Two-way data binding with **_ngModel_** Running the app right now would be disappointing. figure.image-display img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding") :marked We don't see hero data because we are not binding to the `Hero` yet. - We know how to do that from earlier chapters. + We know how to do that from earlier guides. [Displaying Data](./displaying-data.html) taught us Property Binding. [User Input](./user-input.html) showed us how to listen for DOM events with an Event Binding and how to update a component property with the displayed value. @@ -295,7 +295,7 @@ figure.image-display Find the `` tag for the "Name" and update it like this -+makeExample('forms/ts/app/hero-form.component.html', 'ngModel-1','app/hero-form.component.html (excerpt)')(format=".") ++makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-1','app/hero-form.component.html (excerpt)')(format=".") .l-sub-section :marked @@ -324,13 +324,13 @@ figure.image-display :marked Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular attached to the `
` tag. Each `FormControl` is registered under the name we assigned to the `name` attribute. - We'll talk about `NgForm` [later in this chapter](#ngForm). + We'll talk about `NgForm` [later in this guide](#ngForm). :marked Let's add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*. We'll ditch the input box binding message and add a new binding at the top to the component's `diagnostic` property. - Then we can confirm that two-way data binding works *for the entire Hero model*. + Then we can confirm that two-way data binding works *for the entire hero model*. After revision the core of our form should have three `[(ngModel)]` bindings and `name` attributes that look much like this: @@ -344,7 +344,7 @@ figure.image-display - Each input element has a `name` property that is required by Angular Forms to register the control with the form. :marked - If we ran the app right now and changed every Hero model property, the form might display like this: + If we ran the app right now and changed every hero model property, the form might display like this: figure.image-display img(src="/resources/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in super action") :marked @@ -355,7 +355,7 @@ figure.image-display .l-sub-section :marked - ### Inside [(ngModel)] + ### Inside _[(ngModel)]_ *This section is an optional deep dive into [(ngModel)]. Not interested? Skip ahead!* The punctuation in the binding syntax, [()], is a good clue to what's going on. @@ -394,11 +394,11 @@ figure.image-display the event handling such as debounce or throttle the key strokes. Learn more about `NgModel` and other template syntax in the - [Template Syntax](./template-syntax.html) chapter. + [Template Syntax](./template-syntax.html) guide. .l-main-section :marked - ## Track change-state and validity with **ngModel** + ## Track change-state and validity with **_ngModel_** A form isn't just about data binding. We'd also like to know the state of the controls on our form. @@ -509,7 +509,7 @@ figure.image-display Now we can control visibility of the "name" error message by binding properties of the `name` control to the message `
` element's `hidden` property. +makeExample('forms/ts/app/hero-form.component.html', 'hidden-error-msg', - 'app/hero-form.component.html (excerpt)') + 'app/hero-form.component.html (excerpt)')(format='.') :marked In this example, we hide the message when the control is valid or pristine; pristine means the user hasn't changed the value since it was displayed in this form. @@ -523,7 +523,7 @@ figure.image-display Hiding the message while the control is "pristine" achieves that goal. We'll see the significance of this choice when we [add a new hero](#new-hero) to the form. - The Hero *Alter Ego* is optional so we can leave that be. + The hero *Alter Ego* is optional so we can leave that be. Hero *Power* selection is required. We can add the same kind of error handling to the `