fix(form): Form directives are exportedAs 'ngForm' (was 'form')

vicb · vicb · commit 8657ca42980e · 2015-12-08T20:25:16.000Z
fixes angular#5658 BREAKING CHANGE: Before: <form #f="form"> After: <form #f="ngForm"> Closes angular#5709
diff --git a/modules/angular2/src/common/forms/directives/ng_control_group.ts b/modules/angular2/src/common/forms/directives/ng_control_group.ts
@@ -37,8 +37,8 @@ const controlGroupProvider =
  *   template: `
  *     <div>
  *       <h2>Angular2 Control &amp; ControlGroup Example</h2>
- *       <form #f="form">
- *         <div ng-control-group="name" #cg-name="form">
+ *       <form #f="ngForm">
+ *         <div ng-control-group="name" #cg-name="ngForm">
  *           <h3>Enter your name:</h3>
  *           <p>First: <input ng-control="first" required></p>
  *           <p>Middle: <input ng-control="middle"></p>
@@ -73,7 +73,7 @@ const controlGroupProvider =
   selector: '[ng-control-group]',
   providers: [controlGroupProvider],
   inputs: ['name: ng-control-group'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgControlGroup extends ControlContainer implements OnInit,
     OnDestroy {
diff --git a/modules/angular2/src/common/forms/directives/ng_control_name.ts b/modules/angular2/src/common/forms/directives/ng_control_name.ts
@@ -49,8 +49,8 @@ const controlNameBinding =
  *      selector: "login-comp",
  *      directives: [FORM_DIRECTIVES],
  *      template: `
- *        <form #f="form" (submit)='onLogIn(f.value)'>
- *          Login <input type='text' ng-control='login' #l="form">
+ *        <form #f="ngForm" (submit)='onLogIn(f.value)'>
+ *          Login <input type='text' ng-control='login' #l="ngForm">
  *          <div *ng-if="!l.valid">Login is invalid</div>
  *
  *          Password <input type='password' ng-control='password'>
@@ -93,7 +93,7 @@ const controlNameBinding =
   bindings: [controlNameBinding],
   inputs: ['name: ngControl', 'model: ngModel'],
   outputs: ['update: ngModelChange'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgControlName extends NgControl implements OnChanges,
     OnDestroy {
diff --git a/modules/angular2/src/common/forms/directives/ng_form.ts b/modules/angular2/src/common/forms/directives/ng_form.ts
@@ -47,7 +47,7 @@ const formDirectiveProvider =
  *     <div>
  *       <p>Submit the form to see the data object Angular builds</p>
  *       <h2>NgForm demo</h2>
- *       <form #f="form" (ng-submit)="onSubmit(f.value)">
+ *       <form #f="ngForm" (ng-submit)="onSubmit(f.value)">
  *         <h3>Control group: credentials</h3>
  *         <div ng-control-group="credentials">
  *           <p>Login: <input type="text" ng-control="login"></p>
@@ -84,7 +84,7 @@ const formDirectiveProvider =
     '(submit)': 'onSubmit()',
   },
   outputs: ['ngSubmit'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgForm extends ControlContainer implements Form {
   form: ControlGroup;
diff --git a/modules/angular2/src/common/forms/directives/ng_form_control.ts b/modules/angular2/src/common/forms/directives/ng_form_control.ts
@@ -79,7 +79,7 @@ const formControlBinding =
   bindings: [formControlBinding],
   inputs: ['form: ngFormControl', 'model: ngModel'],
   outputs: ['update: ngModelChange'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgFormControl extends NgControl implements OnChanges {
   form: Control;
diff --git a/modules/angular2/src/common/forms/directives/ng_form_model.ts b/modules/angular2/src/common/forms/directives/ng_form_model.ts
@@ -100,7 +100,7 @@ const formDirectiveProvider =
   inputs: ['form: ng-form-model'],
   host: {'(submit)': 'onSubmit()'},
   outputs: ['ngSubmit'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgFormModel extends ControlContainer implements Form,
     OnChanges {
diff --git a/modules/angular2/src/common/forms/directives/ng_model.ts b/modules/angular2/src/common/forms/directives/ng_model.ts
@@ -52,7 +52,7 @@ const formControlBinding =
   bindings: [formControlBinding],
   inputs: ['model: ngModel'],
   outputs: ['update: ngModelChange'],
-  exportAs: 'form'
+  exportAs: 'ngForm'
 })
 export class NgModel extends NgControl implements OnChanges {
   /** @internal */
diff --git a/modules/angular2/test/common/forms/integration_spec.ts b/modules/angular2/test/common/forms/integration_spec.ts
@@ -968,7 +968,7 @@ export function main() {
                   // {{x.valid}} used to crash because valid() tried to read a property
                   // from form.control before it was set. This test verifies this bug is
                   // fixed.
-                  var t = `<form><div ng-control-group="x" #x="form">
+                  var t = `<form><div ng-control-group="x" #x="ngForm">
                   <input type="text" ng-control="test"></div>{{x.valid}}</form>`;
                   var fixture: ComponentFixture;
                   tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then(
@@ -1072,4 +1072,4 @@ function sortedClassList(el) {
   var l = DOM.classList(el);
   ListWrapper.sort(l);
   return l;
-}
+}
diff --git a/modules/playground/src/model_driven_forms/index.ts b/modules/playground/src/model_driven_forms/index.ts
@@ -78,7 +78,7 @@ class ShowError {
   template: `
     <h1>Checkout Form (Model Driven)</h1>
 
-    <form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="form">
+    <form (ng-submit)="onSubmit()" [ng-form-model]="form" #f="ngForm">
       <p>
         <label for="firstName">First Name</label>
         <input type="text" id="firstName" ng-control="firstName">
diff --git a/modules/playground/src/template_driven_forms/index.ts b/modules/playground/src/template_driven_forms/index.ts
@@ -100,7 +100,7 @@ class ShowError {
   template: `
     <h1>Checkout Form</h1>
 
-    <form (ng-submit)="onSubmit()" #f="form">
+    <form (ng-submit)="onSubmit()" #f="ngForm">
       <p>
         <label for="firstName">First Name</label>
         <input type="text" id="firstName" ng-control="firstName" [(ng-model)]="model.firstName" required>
