diff --git a/public/docs/_examples/forms/ts/src/app/hero-form.component.html b/public/docs/_examples/forms/ts/src/app/hero-form.component.html index 2efb9bc7dd..73b703f789 100644 --- a/public/docs/_examples/forms/ts/src/app/hero-form.component.html +++ b/public/docs/_examples/forms/ts/src/app/hero-form.component.html @@ -150,7 +150,9 @@

Hero Form

-
+ + + {{diagnostic}}
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index b0950ade19..a84155d669 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -223,6 +223,12 @@ figure.image-display *You're not using Angular yet*. There are no bindings or extra directives, just layout. +.l-sub-section + :marked + In template driven forms, if you've imported `FormsModule`, you don't have to do anything + to the `` tag in order to make use of `FormsModule`. Continue on to see how this works. + +:marked 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. @@ -292,6 +298,31 @@ figure.image-display :marked Focus on the binding syntax: `[(ngModel)]="..."`. + You need one more addition to display the data. Declare + a template variable for the form. Update the `` tag with + `#heroForm="ngForm"` as follows: + ++makeExcerpt('src/app/hero-form.component.html (excerpt)', 'template-variable') + +:marked + The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole. + +.l-sub-section#ngForm + :marked + ### The _NgForm_ directive + + What `NgForm` directive? + You didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive. + + Angular did. Angular automatically creates and attaches an `NgForm` directive to the `` tag. + + The `NgForm` directive supplements the `form` element with additional features. + 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. + +:marked If you ran the app now and started typing in the *Name* input box, adding and deleting characters, you'd see them appear and disappear from the interpolated text. @@ -321,7 +352,7 @@ figure.image-display Internally, Angular creates `FormControl` instances and registers them with an `NgForm` directive that Angular attached to the `` tag. Each `FormControl` is registered under the name you assigned to the `name` attribute. - Read more in [The NgForm directive](#ngForm), later in this page. + Read more in the previous section, [The NgForm directive](#ngForm). :marked Add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*. @@ -544,25 +575,9 @@ figure.image-display +makeExcerpt('forms/ts/src/app/hero-form.component.html (ngSubmit)') :marked - You added something extra at the end. You defined a - template reference variable, `#heroForm`, and initialized it with the value "ngForm". - - The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole. - -.l-sub-section#ngForm - :marked - ### The _NgForm_ directive - - What `NgForm` directive? - You didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive. - - Angular did. Angular automatically creates and attaches an `NgForm` directive to the `` tag. - - The `NgForm` directive supplements the `form` element with additional features. - 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. + You'd already defined a template reference variable, + `#heroForm`, and initialized it with the value "ngForm". + Now, use that variable to access the form with the Submit button. :marked You'll bind the form's overall validity via