diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component.dart b/public/docs/_examples/forms/dart/lib/hero_form_component.dart index dbc08d6893..73b5e4aab1 100644 --- a/public/docs/_examples/forms/dart/lib/hero_form_component.dart +++ b/public/docs/_examples/forms/dart/lib/hero_form_component.dart @@ -15,21 +15,19 @@ const List _powers = const [ @Component( selector: 'hero-form', - templateUrl: 'hero_form_component.html', - // Soon specifying directives here will be unnecessary. - directives: const [CORE_DIRECTIVES, FORM_DIRECTIVES]) + templateUrl: 'hero_form_component.html') class HeroFormComponent { List get powers => _powers; // #docregion submitted bool submitted = false; // #enddocregion submitted Hero model = new Hero(18, 'Dr IQ', _powers[0], 'Chuck Overstreet'); -// #docregion submitted // #enddocregion no-todo // TODO: Remove this when we're done String get diagnostic => 'DIAGNOSTIC: $model'; // #docregion no-todo +// #docregion submitted onSubmit() { submitted = true; } diff --git a/public/docs/_examples/forms/dart/lib/hero_form_component.html b/public/docs/_examples/forms/dart/lib/hero_form_component.html index 8b7703d120..22097f5e33 100644 --- a/public/docs/_examples/forms/dart/lib/hero_form_component.html +++ b/public/docs/_examples/forms/dart/lib/hero_form_component.html @@ -1,4 +1,4 @@ - +
diff --git a/public/docs/_examples/forms/dart/pubspec.yaml b/public/docs/_examples/forms/dart/pubspec.yaml index 02068e9729..404f4f76ad 100644 --- a/public/docs/_examples/forms/dart/pubspec.yaml +++ b/public/docs/_examples/forms/dart/pubspec.yaml @@ -3,9 +3,12 @@ name: hero_form description: Form example version: 0.0.1 dependencies: - angular2: 2.0.0-alpha.52 + angular2: 2.0.0-beta.0 browser: ^0.10.0 transformers: - angular2: + platform_directives: + - 'package:angular2/common.dart#CORE_DIRECTIVES' + - 'package:angular2/common.dart#FORM_DIRECTIVES' entry_points: web/main.dart diff --git a/public/docs/dart/latest/guide/forms.jade b/public/docs/dart/latest/guide/forms.jade index 3e49db7797..6c1b36e133 100644 --- a/public/docs/dart/latest/guide/forms.jade +++ b/public/docs/dart/latest/guide/forms.jade @@ -95,6 +95,12 @@ figure.image-display +makeTabs('forms/dart/pubspec.yaml, forms/dart/web/index.html, forms/dart/web/main.dart', ',initial,', 'pubspec.yaml, web/index.html, web/main.dart') +.l-sub-section + :marked + Note the `platform_directives` entry in `pubspec.yaml`. + It imports core directives and, more importantly for this chapter, + **form directives**. + :marked So that the code can run, let's create a stub for the `` component. @@ -150,9 +156,8 @@ figure.image-display +makeExample('forms/dart/lib/hero_form_component.dart', null, 'lib/hero_form_component.dart') :marked - There’s nothing special about this component, nothing to distinguish it from any component we've written before, - nothing form-specific about it ... except, perhaps, the tell-tale `FORM_DIRECTIVES` import. - [PENDING: Soon that import shouldn't be necessary.] + There’s nothing special about this component, nothing form-specific, + nothing to distinguish it from any component we've written before. Understanding this component requires only the Angular 2 concepts covered in previous chapters. @@ -314,7 +319,7 @@ figure.image-display The diagnostic near the top of the form confirms that our changes to the values are reflected in the model. - ** We're done with the diagnostic binding. Delete it now.** + **Delete the diagnostic binding.** It has served its purpose. .l-sub-section @@ -337,7 +342,7 @@ figure.image-display In fact, we can break the `NgModel` binding into its two separate modes as in this rewrite of the Name `` binding: - +makeExample('forms/dart/lib/hero_form_component_ngmodelchange.html', 'ngModel-3')(format=".") + +makeExample('forms/dart/lib/hero_form_component_ngmodelchange.html', 'ngModel-3', 'lib/hero_form_component.html (excerpt)')(format=".") :marked
The property binding should feel familiar. The event binding might seem strange. @@ -429,7 +434,7 @@ figure.image-display named **spy** to the Name `` tag and use the spy to display those classes. -+makeExample('forms/dart/lib/hero_form_component_spy.html', 'ngControl-2')(format=".") ++makeExample('forms/dart/lib/hero_form_component_spy.html', 'ngControl-2', 'lib/hero_form_component.html (excerpt)')(format=".") :marked Now run the app, and look at the Name input box. @@ -548,7 +553,7 @@ figure.image-display A "form submit" is meaningless at the moment. To make it meaningful, we'll update the `
` tag with another Angular directive, `NgSubmit`, and bind it to the `HeroFormComponent.onSubmit()` method: -+makeExample('forms/dart/lib/hero_form_component.html', 'ngSubmit')(format=".") ++makeExample('forms/dart/lib/hero_form_component.html', 'ngSubmit', 'lib/hero_form_component.html (excerpt)')(format=".") :marked We slipped in something extra there at the end! We defined a @@ -561,7 +566,7 @@ figure.image-display We'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: -+makeExample('forms/dart/lib/hero_form_component.html', 'submit-button')(format=".") ++makeExample('forms/dart/lib/hero_form_component.html', 'submit-button', 'lib/hero_form_component.html (excerpt)')(format=".") :marked If we run the application now, we find that the button is enabled. It doesn't do anything useful yet but it's alive. @@ -596,7 +601,7 @@ figure.image-display Start by wrapping the form in a `
` and binding its `hidden` property to the `HeroFormComponent.submitted` property. -+makeExample('forms/dart/lib/hero_form_component.html', 'edit-div')(format=".") ++makeExample('forms/dart/lib/hero_form_component.html', 'edit-div', 'lib/hero_form_component.html (excerpt)')(format=".") :marked The main form is visible from the start because the @@ -610,7 +615,7 @@ figure.image-display Now the app needs to show something else while the form is in the submitted state. Add the following block of HTML below the `
` wrapper we just wrote: -+makeExample('forms/dart/lib/hero_form_component.html', 'submitted')(format=".") ++makeExample('forms/dart/lib/hero_form_component.html', 'submitted', 'lib/hero_form_component.html (excerpt)')(format=".") :marked There's our hero again, displayed read-only with interpolation bindings.