docs(guide): update Dart forms example & text

closes #654
2016-01-05 16:32:13 -08:00
parent bf72ad9d3f
commit b8063a814e
4 changed files with 22 additions and 16 deletions
@@ -15,21 +15,19 @@ const List<String> _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<String> 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;
  }
@@ -1,4 +1,4 @@
-<!-- #docplaster ... all of the form ... -->
+<!-- #docplaster ... -->
 <!-- #docregion -->
 <div class="container">
  <!-- #docregion edit-div -->
@@ -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

@@ -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 `<hero-form>` 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 `<input>` 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
    <br>The property binding should feel familiar. The event binding might seem strange.
@@ -429,7 +434,7 @@ figure.image-display
  named **spy**
  to the Name `<input>` 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 `<form>` 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 `<div>` 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 `<div>` 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.