chore: merge input form builder updates

Gruntfile.js

@@ -246,14 +246,7 @@ module.exports = function (grunt) {
     },
     webpack: {
       singleJs: require('./webpack.config.js')
-    },
-
-    universal: {
-      examples: {
-        src: 'index.html'
-      }
     }
-
   });
 
   grunt.loadNpmTasks('grunt-contrib-copy');
@@ -361,98 +354,6 @@ module.exports = function (grunt) {
     });
   });
 
-  // NOTE: This task does not work.  It is WIP.
-  grunt.registerMultiTask('universal', 'Prerender examples app as static HTML', function () {
-    var done = this.async();
-    /*
-     * based on angular2-grunt-prerender
-     * https://github.com/angular/universal
-     *
-     * Copyright (c) 2016 Wassim Chegham
-     * Licensed under the MIT license.
-     */
-    try {
-      var proxyquire = require('proxyquire');
-      var zone = require('zone.js');
-      var reflect = require('reflect-metadata');
-      var provide = require('angular2/core');
-      var router = require('angular2/router');
-      var ng2material = require('./ng2-material/all');
-      ng2material['@global'] = true;
-      ng2material['@noCallThru'] = true;
-      var app = proxyquire('./examples/app', {
-        'ng2-material/all': ng2material
-      });
-      var all = proxyquire('./examples/all', {
-        'ng2-material/all': ng2material
-      });
-      var universal = require('angular2-universal-preview');
-      var options = this.options({
-        component: [app.DemosApp],
-        providers: ng2material.MATERIAL_NODE_PROVIDERS,
-        platformProviders: [
-          universal.NODE_LOCATION_PROVIDERS,
-        ],
-        directives: ng2material.MATERIAL_DIRECTIVES.concat(all.DEMO_DIRECTIVES),
-        preboot: false,
-        separator: '\r\n'
-      });
-      var angular2Prerender = function (file) {
-        var clientHtml = file.toString();
-        // bootstrap and render component to string
-        var bootloader = options.bootloader;
-        if (!options.bootloader) {
-          options.bootloader = {
-            component: options.component,
-            document: universal.parseDocument(clientHtml),
-            providers: options.providers,
-            componentProviders: options.componentProviders,
-            platformProviders: options.platformProviders,
-            directives: options.directives,
-            preboot: options.preboot
-          };
-        }
-        bootloader = universal.Bootloader.create(options.bootloader);
-        return bootloader.serializeApplication().then(function (html) {
-          return new Buffer(html);
-        });
-      };
-      this.files.forEach(function (f) {
-        var src = f.src.filter(function (filepath) {
-            if (!grunt.file.exists(filepath)) {
-              grunt.log.warn('Source file "' + filepath + '" not found.');
-              return false;
-            }
-            else {
-              return true;
-            }
-          })
-          .map(function (filepath) {
-            return grunt.file.read(filepath);
-          })
-          .join(grunt.util.normalizelf(options.separator));
-        // Handle options.
-        angular2Prerender(src)
-          .then(function (buffer) {
-            return src = buffer;
-          })
-          .then(function (_src) {
-            return grunt.file.write(f.dest, _src);
-          })
-          .then(function (_) {
-            return grunt.log.writeln('File "' + f.dest + '" created.');
-            done();
-          });
-      });
-
-    }
-    catch (e) {
-      console.error(e.stack);
-      return;
-    }
-
-  });
-
   grunt.registerTask('site-meta', 'Build metadata files describing example usages', function (tag) {
     var done = this.async();
     var glob = require('glob');

examples/components/input/form_builder.html

@@ -16,7 +16,7 @@ <h1>{{description}}</h1>
 
       <md-input-container class="md-block">
         <label for="description">Description</label>
-        <input md-input ngControl="description" id="description" [(value)]="model.description">
+        <input md-input ngControl="description" id="description">
         <div md-messages="description">
           <div md-message="required">This is required.</div>
           <div md-message="maxlength">The name has to be less than 30 characters long.</div>
@@ -25,23 +25,23 @@ <h1>{{description}}</h1>
 
       <md-input-container class="md-block">
         <label for="clientName">Client Name</label>
-        <input md-input ngControl="clientName" id="clientName" [(value)]="model.clientName">
+        <input md-input ngControl="clientName" id="clientName" >
         <div md-messages="clientName" role="alert">
           <div md-message="required">This is required.</div>
         </div>
       </md-input-container>
 
       <md-input-container class="md-block">
         <label for="clientEmail">Client Email</label>
-        <input md-input type="email" ngControl="clientEmail" id="clientEmail" [(value)]="model.clientEmail"/>
+        <input md-input type="email" ngControl="clientEmail" id="clientEmail" />
         <div md-messages="clientEmail" role="alert">
           <div md-message>Your email must be between 10 and 100 characters long and look like an e-mail address.</div>
         </div>
       </md-input-container>
 
       <md-input-container class="md-block">
         <label for="rate">Hourly Rate (USD)</label>
-        <input md-input type="number" step="any" ngControl="rate" id="rate" [(value)]="model.rate" #rateInput/>
+        <input md-input type="number" step="any" ngControl="rate" id="rate"  #rateInput/>
         <div md-messages="rate" role="alert">
           <div md-message="mdNumberRequired">
             You've got to charge something! You can't just <b>give away</b> a Missile Defense
@@ -61,7 +61,7 @@ <h1>{{description}}</h1>
       </md-input-container>
     </form>
     <strong>Model</strong>
-    <pre class="md-padding">{{model | json}}</pre>
+    <pre class="md-padding">{{projectForm.value | json}}</pre>
   </md-content>
 
 </div>

examples/components/input/form_builder.ts

@@ -16,17 +16,11 @@ import {FORM_DIRECTIVES, Validators, FormBuilder, ControlGroup} from "angular2/c
 })
 export default class InputFormBuilder {
   projectForm: ControlGroup;
-  model = {
-    clientName: '',
-    clientEmail: '',
-    description: 'Nuclear Missile Defense System',
-    rate: 500
-  };
-
+
   constructor(fb: FormBuilder) {
     this.projectForm = fb.group({
       'clientName': ['', Validators.required],
-      'description': ['', Validators.compose([
+      'description': ['Nuclear Missile Defense System', Validators.compose([
         Validators.required,
         Validators.maxLength(30)
       ])],
@@ -36,7 +30,7 @@ export default class InputFormBuilder {
         Validators.minLength(10),
         Validators.maxLength(100)
       ])],
-      'rate': ['', Validators.compose([
+      'rate': [500, Validators.compose([
         MdNumberRequiredValidator.inline(),
         MdPatternValidator.inline('^1234$'),
         MdMinValueValidator.inline(800),

examples/platform/node/bootstrap.ts

@@ -1,4 +1,4 @@
-import {bootstrap} from "angular2-universal-preview";
+import {bootstrap} from "angular2-universal";
 import {ROUTER_PROVIDERS} from "angular2/router"; 
 import {MATERIAL_NODE_PROVIDERS} from "ng2-material/all";
 import {HTTP_PROVIDERS} from "angular2/http";

ng2-material/components/input/input.ts

@@ -6,9 +6,10 @@ import {
   OnChanges,
   ContentChild,
   Input,
-  Output
+  Output,
+  Optional
 } from "angular2/core";
-import {FORM_PROVIDERS} from "angular2/common";
+import {NgModel, NgControl, FORM_PROVIDERS} from "angular2/common";
 import {ObservableWrapper, EventEmitter, TimerWrapper} from "angular2/src/facade/async";
 import {isBlank} from "angular2/src/facade/lang";
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
@@ -33,14 +34,19 @@ import {DOM} from "angular2/src/platform/dom/dom_adapter";
 export class MdInput {
   _value: string;
 
+  constructor(@Optional() private model: NgModel,
+              @Optional() private control: NgControl) {
+  }
+
   @Input('value')
   set value(value: string) {
     this._value = value;
     ObservableWrapper.callEmit(this.mdChange, this.value);
   }
 
   get value(): string {
-    return !isBlank(this._value) ? this._value : '';
+    let val = this.model ? this.model.value : this.control ? this.control.value : this._value;
+    return !isBlank(val) ? val : '';
   }
 
   @Input()

package.json

@@ -15,7 +15,7 @@
     "test": "$(npm bin)/grunt karma"
   },
   "dependencies": {
-    "angular2": ">=2.0.0-beta.12",
+    "angular2": ">=2.0.0-beta.14",
     "es6-promise": ">=3.0.2",
     "es6-shim": ">=0.35.0",
     "reflect-metadata": "0.1.2",
@@ -24,7 +24,8 @@
   },
   "typings": "dist/ng2-material.d.ts",
   "devDependencies": {
-    "angular2-universal-preview": "*",
+    "angular2-universal-polyfills": "^0.3.4",
+    "angular2-universal": "0.90.2",
     "autoprefixer": "6.2.0",
     "coveralls": "2.11.6",
     "css": "^2.2.1",

tsconfig.json

@@ -60,7 +60,6 @@
         "ng2-material/core/util/util.ts",
         "ng2-material/core/util/viewport.ts",
         "ng2-material/webpack_all.ts",
-        "ng2-material/webpack_scripts.ts",
         "ng2-material/webpack_styles.ts",
         "examples/all.ts",
         "examples/app.ts",