docs(forms): upgrading forms guide to new api

This PR upgrades the existing forms to the new API,
while leaving a copy for existing users.

The current forms will be the default until RC4, at
which point we will switch the default to the new API
but still retain a link to the old forms API.

After RC5 the old API docs will be completely removed.

public/docs/_examples/forms/e2e-spec.ts

@@ -33,7 +33,7 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
   });
 
   it('should hide form after submit', function () {
-    let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
+    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
     expect(alterEgoEle.isDisplayed()).toBe(true);
     let submitButtonEle = element.all(by.css('button[type=submit]')).get(0);
     submitButtonEle.click().then(function() {
@@ -44,7 +44,7 @@ describeIf(browser.appIsTs || browser.appIsJs, 'Forms Tests', function () {
   it('should reflect submitted data after submit', function () {
     let test = 'testing 1 2 3';
     let newValue: string;
-    let alterEgoEle = element.all(by.css('input[ngcontrol=alterEgo]')).get(0);
+    let alterEgoEle = element.all(by.css('input[name=alterEgo]')).get(0);
     alterEgoEle.getAttribute('value').then(function(value) {
       // alterEgoEle.sendKeys(test);
       sendKeys(alterEgoEle, test);

public/docs/_examples/forms/js/app/hero-form.component.html

@@ -13,7 +13,7 @@
         <!-- #docregion name-with-error-msg -->
        <input type="text" class="form-control" required
          [(ngModel)]="model.name"
-           ngControl="name"  #name="ngForm" >
+           name="name"  #name="ngModel" >
        <div [hidden]="name.valid" class="alert alert-danger">
          Name is required
        </div>
@@ -24,14 +24,14 @@
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control"
          [(ngModel)]="model.alterEgo"
-           ngControl="alterEgo" >
+           name="alterEgo" >
      </div>
 
      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" required
          [(ngModel)]="model.power"
-           ngControl="power" #power="ngForm" >
+           name="power" #power="ngModel" >
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>
        <div [hidden]="power.valid" class="alert alert-danger">
@@ -133,19 +133,19 @@
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" class="form-control" required
-           [(ngModel)]="model.name" >
+           [(ngModel)]="model.name" name="name" >
        </div>
 
        <div class="form-group">
          <label for="alterEgo">Alter Ego</label>
          <input type="text"  class="form-control"
-           [(ngModel)]="model.alterEgo">
+           [(ngModel)]="model.alterEgo" name="alterEgo">
        </div>
 
        <div class="form-group">
          <label for="power">Hero Power</label>
          <select class="form-control"  required
-           [(ngModel)]="model.power" >
+           [(ngModel)]="model.power" name="power">
            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
          </select>
        </div>
@@ -173,18 +173,18 @@
  <!-- #enddocregion ngModel-3-->
  <hr>
  <form>
- <!-- #docregion ngControl-1 -->
+ <!-- #docregion ngModelName-1 -->
       <input type="text" class="form-control" required
         [(ngModel)]="model.name"
-        ngControl="name" >
- <!-- #enddocregion ngControl-1 -->
+        name="name" >
+ <!-- #enddocregion ngModelName-1 -->
  <hr>
- <!-- #docregion ngControl-2 -->
+ <!-- #docregion ngModelName-2 -->
       <input type="text" class="form-control" required
         [(ngModel)]="model.name"
-        ngControl="name"  #spy >
+        name="name"  #spy >
       <br>TODO: remove this: {{spy.className}}
- <!-- #enddocregion ngControl-2 -->
+ <!-- #enddocregion ngModelName-2 -->
  </form>
 
  <div>

public/docs/_examples/forms/js/app/main.js

@@ -1,6 +1,9 @@
 // #docregion
 (function(app) {
   document.addEventListener('DOMContentLoaded', function() {
-    ng.platformBrowserDynamic.bootstrap(app.AppComponent);
+    ng.platformBrowserDynamic.bootstrap(app.AppComponent,[
+      ng.forms.disableDeprecatedForms(),
+      ng.forms.provideForms()  
+    ]);
   });
 })(window.app || (window.app = {}));

public/docs/_examples/forms/js/index.html

@@ -24,6 +24,7 @@
    <script src="node_modules/@angular/core/bundles/core.umd.js"></script>
    <script src="node_modules/@angular/common/bundles/common.umd.js"></script>
    <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script>
+   <script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
    <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script>
    <script src="node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
 

public/docs/_examples/forms/ts/app/hero-form.component.html

@@ -13,7 +13,7 @@
         <label for="name">Name</label>
         <input type="text" class="form-control" required
           [(ngModel)]="model.name"
-            ngControl="name"  #name="ngForm" >
+            name="name"  #name="ngModel" >
         <!-- #docregion hidden-error-msg -->
         <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
         <!-- #enddocregion hidden-error-msg -->
@@ -26,14 +26,14 @@
         <label for="alterEgo">Alter Ego</label>
         <input type="text" class="form-control"
           [(ngModel)]="model.alterEgo"
-            ngControl="alterEgo" >
+            name="alterEgo" >
       </div>
 
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select class="form-control" required
           [(ngModel)]="model.power"
-            ngControl="power" #power="ngForm" >
+            name="power" #power="ngModel" >
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
@@ -148,19 +148,19 @@
         <div class="form-group">
           <label for="name">Name</label>
           <input type="text" class="form-control" required
-            [(ngModel)]="model.name" >
+            [(ngModel)]="model.name" name="name">
         </div>
 
         <div class="form-group">
           <label for="alterEgo">Alter Ego</label>
           <input type="text"  class="form-control"
-            [(ngModel)]="model.alterEgo">
+            [(ngModel)]="model.alterEgo" name="alterEgo">
         </div>
 
         <div class="form-group">
           <label for="power">Hero Power</label>
           <select class="form-control"  required
-            [(ngModel)]="model.power" >
+            [(ngModel)]="model.power" name="power">
             <option *ngFor="let p of powers" [value]="p">{{p}}</option>
           </select>
         </div>
@@ -176,7 +176,7 @@
   <hr>
   <!-- #docregion ngModel-1-->
     <input type="text"  class="form-control" required
-      [(ngModel)]="model.name" >
+      [(ngModel)]="model.name" name="name">
       TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-1-->
   <hr>
@@ -191,18 +191,18 @@
   <form *ngIf="active">
   <!-- #enddocregion form-active -->
 
-  <!-- #docregion ngControl-1 -->
+  <!-- #docregion ngModelName-1 -->
        <input type="text" class="form-control" required
          [(ngModel)]="model.name"
-         ngControl="name" >
-  <!-- #enddocregion ngControl-1 -->
+         name="name" >
+  <!-- #enddocregion ngModelName-1 -->
   <hr>
-  <!-- #docregion ngControl-2 -->
+  <!-- #docregion ngModelName-2 -->
        <input type="text" class="form-control" required
          [(ngModel)]="model.name"
-         ngControl="name"  #spy >
+         name="name"  #spy >
        <br>TODO: remove this: {{spy.className}}
-  <!-- #enddocregion ngControl-2 -->
+  <!-- #enddocregion ngModelName-2 -->
   </form>
 
 </div>

public/docs/_examples/forms/ts/app/main.ts

@@ -1,6 +1,11 @@
 // #docregion
 import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { disableDeprecatedForms, provideForms } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 
-bootstrap(AppComponent);
+bootstrap(AppComponent, [
+  disableDeprecatedForms(),
+  provideForms()
+ ])
+ .catch((err: any) => console.error(err));