diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade index 19b7d09aa5..73651c1092 100644 --- a/public/docs/dart/latest/guide/forms.jade +++ b/public/docs/dart/latest/guide/forms.jade @@ -1,6 +1,5 @@ include ../_util-fns - :marked We’ve all used a form to log in, submit a help request, place an order, book a flight, schedule a meeting, and perform countless other data entry tasks. @@ -30,6 +29,8 @@ include ../_util-fns - How to share information across controls with template reference variables + Run the . + .l-main-section :marked ## Template-driven forms diff --git a/public/docs/dart/latest/guide/user-input.jade b/public/docs/dart/latest/guide/user-input.jade index 4c29157dc8..bd73ed73da 100644 --- a/public/docs/dart/latest/guide/user-input.jade +++ b/public/docs/dart/latest/guide/user-input.jade @@ -6,7 +6,7 @@ include ../_util-fns In this chapter we learn to bind to those events using the Angular event binding syntax. - Run the live example. + Run the . :marked ## Binding to user input events diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index dbe9b8ded6..0939f5cded 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -21,15 +21,15 @@ include ../_util-fns - two-way data bind with `[(ngModel)]` syntax for reading and writing values to input controls - - track the change state and validity of form controls using `ngModel` in combination with a form + - track the change state and validity of form controls using `ngModel` in combination with a form - provide strong visual feedback using special CSS classes that track the state of the controls - display validation errors to users and enable/disable form controls - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements - - Live Example + + Run the . .l-main-section :marked @@ -107,13 +107,13 @@ include ../_quickstart_repo The TypeScript compiler generates a public field for each `public` constructor parameter and assigns the parameter’s value to that field automatically when we create new heroes. - + The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`. We can create a new hero like this: code-example(format=""). - let myHero = new Hero(42, 'SkyDog', - 'Fetch any object at any distance', + let myHero = new Hero(42, 'SkyDog', + 'Fetch any object at any distance', 'Leslie Rollover'); console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog" :marked @@ -159,7 +159,7 @@ code-example(format=""). write (or read) large stretches of HTML and few editors are much help with files that have a mix of HTML and code. We also like short files with a clear and obvious purpose like this one. - We made a good choice to put the HTML template elsewhere. + We made a good choice to put the HTML template elsewhere. We'll write that template in a moment. Before we do, we'll take a step back and revise the `app.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`. @@ -191,7 +191,7 @@ code-example(format=""). .alert.is-important :marked - If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array. + If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array. If you wrote it and it should belong to this module, ​_DO_​ declare it in the `declarations` array. .l-main-section @@ -230,7 +230,7 @@ code-example(format=""). **We are not using Angular yet**. There are no bindings. No extra directives. Just layout. - The `container`, `form-group`, `form-control`, and `btn` classes + The `container`, `form-group`, `form-control`, and `btn` classes come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic. We're using Bootstrap to gussy up our form. Hey, what's a form without a little style! @@ -300,7 +300,7 @@ figure.image-display We appended a diagnostic interpolation after the input tag so we can see what we're doing. We left ourselves a note to throw it away when we're done. - + :marked Focus on the binding syntax: `[(ngModel)]="..."`. @@ -314,13 +314,13 @@ figure.image-display The diagnostic is evidence that we really are flowing values from the input box to the model and back again. **That's two-way data binding!** - Notice that we also added a `name` attribute to our `` tag and set it to "name" + Notice that we also added a `name` attribute to our `` tag 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. Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form. .l-sub-section :marked - Internally Angular creates `FormControls` and registers them with an `NgForm` directive that Angular + 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). @@ -340,7 +340,7 @@ figure.image-display - Each input element has an `id` property that is used by the `label` element's `for` attribute to match the label to it's input control. - 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: figure.image-display @@ -355,7 +355,7 @@ figure.image-display :marked ### 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. In a Property Binding, a value flows from the model to a target property on screen. @@ -405,7 +405,7 @@ figure.image-display The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state. We can leverage those class names to change the appearance of the control and make messages appear or disappear. - + table tr th State @@ -491,32 +491,32 @@ figure.image-display 1. the "*is required*" message in a nearby `
` which we'll display only if the control is invalid. Here's how we do it for the *name* input box: -+makeExample('forms/ts/app/hero-form.component.html', - 'name-with-error-msg', ++makeExample('forms/ts/app/hero-form.component.html', + 'name-with-error-msg', 'app/hero-form.component.html (excerpt)')(format=".") :marked We need a template reference variable to access the input box's Angular control from within the template. Here we created a variable called `name` and gave it the value "ngModel". .l-sub-section :marked - Why "ngModel"? + Why "ngModel"? A directive's [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor) property tells Angular how to link the reference variable to the directive. We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel". 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', ++makeExample('forms/ts/app/hero-form.component.html', + 'hidden-error-msg', 'app/hero-form.component.html (excerpt)') :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. - + 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. + This user experience is the developer's choice. Some folks want to see the message at all times. If we ignore the `pristine` state, we would hide the message only when the value is valid. - If we arrive in this component with a new (blank) hero or an invalid hero, + If we arrive in this component with a new (blank) hero or an invalid hero, we'll see the error message immediately, before we've done anything. - + Some folks find that behavior disconcerting. They only want to see the message when the user makes an invalid change. 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. @@ -527,30 +527,30 @@ figure.image-display We can add the same kind of error handling to the `