@angular/forms - npm Package Compare versions

Comparing version 0.3.0 to 2.0.0-rc.6

index.d.ts

@@ -8,2 +8,7 @@ /**
  */
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the forms package.
+ */
 export * from './src/forms';

index.js

@@ -8,7 +8,8 @@ /**
  */
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-__export(require('./src/forms'));
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the forms package.
+ */
+export * from './src/forms';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@angular/forms",
-  "version": "0.3.0",
-  "description": "",
-  "main": "index.js",
-  "jsnext:main": "esm/index.js",
+  "version": "2.0.0-rc.6",
+  "description": "Angular 2 forms",
+  "main": "bundles/forms.umd.js",
+  "module": "index.js",
   "typings": "index.d.ts",
@@ -11,5 +11,4 @@ "author": "angular",
   "peerDependencies": {
-    "@angular/core": "^2.0.0-rc.5",
-    "@angular/common": "^2.0.0-rc.5",
-    "@angular/compiler": "^2.0.0-rc.5"
+    "@angular/core": "^2.0.0-rc.6",
+    "@angular/common": "^2.0.0-rc.6"
   },
@@ -16,0 +15,0 @@ "repository": {

src/directives.d.ts

@@ -13,3 +13,3 @@ /**
 export { NgControl } from './directives/ng_control';
-export { NgControlStatus } from './directives/ng_control_status';
+export { NgControlStatus, NgControlStatusGroup } from './directives/ng_control_status';
 export { NgForm } from './directives/ng_form';
@@ -27,5 +27,5 @@ export { NgModel } from './directives/ng_model';
 export { MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator } from './directives/validators';
-export declare const SHARED_FORM_DIRECTIVES: Type[];
-export declare const TEMPLATE_DRIVEN_DIRECTIVES: Type[];
-export declare const REACTIVE_DRIVEN_DIRECTIVES: Type[];
+export declare const SHARED_FORM_DIRECTIVES: Type<any>[];
+export declare const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[];
+export declare const REACTIVE_DRIVEN_DIRECTIVES: Type<any>[];
 /**
@@ -46,9 +46,9 @@ *
  * ```
- * @experimental
+ * @stable
  */
-export declare const FORM_DIRECTIVES: Type[][];
+export declare const FORM_DIRECTIVES: Type<any>[][];
 /**
- * @experimental
+ * @stable
  */
-export declare const REACTIVE_FORM_DIRECTIVES: Type[][];
+export declare const REACTIVE_FORM_DIRECTIVES: Type<any>[][];
 /**
@@ -55,0 +55,0 @@ * Internal module used for sharing directives between FormsModule and ReactiveFormsModule

src/directives.js

@@ -8,65 +8,42 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var checkbox_value_accessor_1 = require('./directives/checkbox_value_accessor');
-var default_value_accessor_1 = require('./directives/default_value_accessor');
-var ng_control_status_1 = require('./directives/ng_control_status');
-var ng_form_1 = require('./directives/ng_form');
-var ng_model_1 = require('./directives/ng_model');
-var ng_model_group_1 = require('./directives/ng_model_group');
-var number_value_accessor_1 = require('./directives/number_value_accessor');
-var radio_control_value_accessor_1 = require('./directives/radio_control_value_accessor');
-var form_control_directive_1 = require('./directives/reactive_directives/form_control_directive');
-var form_control_name_1 = require('./directives/reactive_directives/form_control_name');
-var form_group_directive_1 = require('./directives/reactive_directives/form_group_directive');
-var form_group_name_1 = require('./directives/reactive_directives/form_group_name');
-var select_control_value_accessor_1 = require('./directives/select_control_value_accessor');
-var select_multiple_control_value_accessor_1 = require('./directives/select_multiple_control_value_accessor');
-var validators_1 = require('./directives/validators');
-var checkbox_value_accessor_2 = require('./directives/checkbox_value_accessor');
-exports.CheckboxControlValueAccessor = checkbox_value_accessor_2.CheckboxControlValueAccessor;
-var default_value_accessor_2 = require('./directives/default_value_accessor');
-exports.DefaultValueAccessor = default_value_accessor_2.DefaultValueAccessor;
-var ng_control_1 = require('./directives/ng_control');
-exports.NgControl = ng_control_1.NgControl;
-var ng_control_status_2 = require('./directives/ng_control_status');
-exports.NgControlStatus = ng_control_status_2.NgControlStatus;
-var ng_form_2 = require('./directives/ng_form');
-exports.NgForm = ng_form_2.NgForm;
-var ng_model_2 = require('./directives/ng_model');
-exports.NgModel = ng_model_2.NgModel;
-var ng_model_group_2 = require('./directives/ng_model_group');
-exports.NgModelGroup = ng_model_group_2.NgModelGroup;
-var number_value_accessor_2 = require('./directives/number_value_accessor');
-exports.NumberValueAccessor = number_value_accessor_2.NumberValueAccessor;
-var radio_control_value_accessor_2 = require('./directives/radio_control_value_accessor');
-exports.RadioControlValueAccessor = radio_control_value_accessor_2.RadioControlValueAccessor;
-var form_control_directive_2 = require('./directives/reactive_directives/form_control_directive');
-exports.FormControlDirective = form_control_directive_2.FormControlDirective;
-var form_control_name_2 = require('./directives/reactive_directives/form_control_name');
-exports.FormControlName = form_control_name_2.FormControlName;
-var form_group_directive_2 = require('./directives/reactive_directives/form_group_directive');
-exports.FormGroupDirective = form_group_directive_2.FormGroupDirective;
-var form_group_name_2 = require('./directives/reactive_directives/form_group_name');
-exports.FormArrayName = form_group_name_2.FormArrayName;
-exports.FormGroupName = form_group_name_2.FormGroupName;
-var select_control_value_accessor_2 = require('./directives/select_control_value_accessor');
-exports.NgSelectOption = select_control_value_accessor_2.NgSelectOption;
-exports.SelectControlValueAccessor = select_control_value_accessor_2.SelectControlValueAccessor;
-var select_multiple_control_value_accessor_2 = require('./directives/select_multiple_control_value_accessor');
-exports.NgSelectMultipleOption = select_multiple_control_value_accessor_2.NgSelectMultipleOption;
-exports.SelectMultipleControlValueAccessor = select_multiple_control_value_accessor_2.SelectMultipleControlValueAccessor;
-var validators_2 = require('./directives/validators');
-exports.MaxLengthValidator = validators_2.MaxLengthValidator;
-exports.MinLengthValidator = validators_2.MinLengthValidator;
-exports.PatternValidator = validators_2.PatternValidator;
-exports.RequiredValidator = validators_2.RequiredValidator;
-exports.SHARED_FORM_DIRECTIVES = [
-    select_control_value_accessor_1.NgSelectOption, select_multiple_control_value_accessor_1.NgSelectMultipleOption, default_value_accessor_1.DefaultValueAccessor, number_value_accessor_1.NumberValueAccessor,
-    checkbox_value_accessor_1.CheckboxControlValueAccessor, select_control_value_accessor_1.SelectControlValueAccessor, select_multiple_control_value_accessor_1.SelectMultipleControlValueAccessor,
-    radio_control_value_accessor_1.RadioControlValueAccessor, ng_control_status_1.NgControlStatus, validators_1.RequiredValidator, validators_1.MinLengthValidator,
-    validators_1.MaxLengthValidator, validators_1.PatternValidator
+import { NgModule } from '@angular/core';
+import { CheckboxControlValueAccessor } from './directives/checkbox_value_accessor';
+import { DefaultValueAccessor } from './directives/default_value_accessor';
+import { NgControlStatus, NgControlStatusGroup } from './directives/ng_control_status';
+import { NgForm } from './directives/ng_form';
+import { NgModel } from './directives/ng_model';
+import { NgModelGroup } from './directives/ng_model_group';
+import { NumberValueAccessor } from './directives/number_value_accessor';
+import { RadioControlValueAccessor } from './directives/radio_control_value_accessor';
+import { FormControlDirective } from './directives/reactive_directives/form_control_directive';
+import { FormControlName } from './directives/reactive_directives/form_control_name';
+import { FormGroupDirective } from './directives/reactive_directives/form_group_directive';
+import { FormArrayName, FormGroupName } from './directives/reactive_directives/form_group_name';
+import { NgSelectOption, SelectControlValueAccessor } from './directives/select_control_value_accessor';
+import { NgSelectMultipleOption, SelectMultipleControlValueAccessor } from './directives/select_multiple_control_value_accessor';
+import { MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator } from './directives/validators';
+export { CheckboxControlValueAccessor } from './directives/checkbox_value_accessor';
+export { DefaultValueAccessor } from './directives/default_value_accessor';
+export { NgControl } from './directives/ng_control';
+export { NgControlStatus, NgControlStatusGroup } from './directives/ng_control_status';
+export { NgForm } from './directives/ng_form';
+export { NgModel } from './directives/ng_model';
+export { NgModelGroup } from './directives/ng_model_group';
+export { NumberValueAccessor } from './directives/number_value_accessor';
+export { RadioControlValueAccessor } from './directives/radio_control_value_accessor';
+export { FormControlDirective } from './directives/reactive_directives/form_control_directive';
+export { FormControlName } from './directives/reactive_directives/form_control_name';
+export { FormGroupDirective } from './directives/reactive_directives/form_group_directive';
+export { FormArrayName, FormGroupName } from './directives/reactive_directives/form_group_name';
+export { NgSelectOption, SelectControlValueAccessor } from './directives/select_control_value_accessor';
+export { NgSelectMultipleOption, SelectMultipleControlValueAccessor } from './directives/select_multiple_control_value_accessor';
+export { MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator } from './directives/validators';
+export var SHARED_FORM_DIRECTIVES = [
+    NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
+    CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
+    RadioControlValueAccessor, NgControlStatus, NgControlStatusGroup, RequiredValidator,
+    MinLengthValidator, MaxLengthValidator, PatternValidator
 ];
-exports.TEMPLATE_DRIVEN_DIRECTIVES = [ng_model_1.NgModel, ng_model_group_1.NgModelGroup, ng_form_1.NgForm];
-exports.REACTIVE_DRIVEN_DIRECTIVES = [form_control_directive_1.FormControlDirective, form_group_directive_1.FormGroupDirective, form_control_name_1.FormControlName, form_group_name_1.FormGroupName, form_group_name_1.FormArrayName];
+export var TEMPLATE_DRIVEN_DIRECTIVES = [NgModel, NgModelGroup, NgForm];
+export var REACTIVE_DRIVEN_DIRECTIVES = [FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];
 /**
@@ -87,19 +64,22 @@ *
  * ```
- * @experimental
+ * @stable
  */
-exports.FORM_DIRECTIVES = [exports.TEMPLATE_DRIVEN_DIRECTIVES, exports.SHARED_FORM_DIRECTIVES];
+export var FORM_DIRECTIVES = [TEMPLATE_DRIVEN_DIRECTIVES, SHARED_FORM_DIRECTIVES];
 /**
- * @experimental
+ * @stable
  */
-exports.REACTIVE_FORM_DIRECTIVES = [exports.REACTIVE_DRIVEN_DIRECTIVES, exports.SHARED_FORM_DIRECTIVES];
-var InternalFormsSharedModule = (function () {
+export var REACTIVE_FORM_DIRECTIVES = [REACTIVE_DRIVEN_DIRECTIVES, SHARED_FORM_DIRECTIVES];
+/**
+ * Internal module used for sharing directives between FormsModule and ReactiveFormsModule
+ */
+export var InternalFormsSharedModule = (function () {
     function InternalFormsSharedModule() {
     }
-    /** @nocollapse */
     InternalFormsSharedModule.decorators = [
-        { type: core_1.NgModule, args: [{ declarations: exports.SHARED_FORM_DIRECTIVES, exports: exports.SHARED_FORM_DIRECTIVES },] },
+        { type: NgModule, args: [{ declarations: SHARED_FORM_DIRECTIVES, exports: SHARED_FORM_DIRECTIVES },] },
     ];
+    /** @nocollapse */
+    InternalFormsSharedModule.ctorParameters = [];
     return InternalFormsSharedModule;
 }());
-exports.InternalFormsSharedModule = InternalFormsSharedModule;
 //# sourceMappingURL=directives.js.map

src/directives.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"SHARED_FORM_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/select_control_value_accessor","name":"NgSelectOption"},{"__symbolic":"reference","module":"./directives/select_multiple_control_value_accessor","name":"NgSelectMultipleOption"},{"__symbolic":"reference","module":"./directives/default_value_accessor","name":"DefaultValueAccessor"},{"__symbolic":"reference","module":"./directives/number_value_accessor","name":"NumberValueAccessor"},{"__symbolic":"reference","module":"./directives/checkbox_value_accessor","name":"CheckboxControlValueAccessor"},{"__symbolic":"reference","module":"./directives/select_control_value_accessor","name":"SelectControlValueAccessor"},{"__symbolic":"reference","module":"./directives/select_multiple_control_value_accessor","name":"SelectMultipleControlValueAccessor"},{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlValueAccessor"},{"__symbolic":"reference","module":"./directives/ng_control_status","name":"NgControlStatus"},{"__symbolic":"reference","module":"./directives/validators","name":"RequiredValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"MinLengthValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"MaxLengthValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"PatternValidator"}],"TEMPLATE_DRIVEN_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/ng_model","name":"NgModel"},{"__symbolic":"reference","module":"./directives/ng_model_group","name":"NgModelGroup"},{"__symbolic":"reference","module":"./directives/ng_form","name":"NgForm"}],"REACTIVE_DRIVEN_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/reactive_directives/form_control_directive","name":"FormControlDirective"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_directive","name":"FormGroupDirective"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_control_name","name":"FormControlName"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_name","name":"FormGroupName"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_name","name":"FormArrayName"}],"FORM_DIRECTIVES":[{"__symbolic":"reference","name":"TEMPLATE_DRIVEN_DIRECTIVES"},{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}],"REACTIVE_FORM_DIRECTIVES":[{"__symbolic":"reference","name":"REACTIVE_DRIVEN_DIRECTIVES"},{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}],"InternalFormsSharedModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"},"exports":{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}}]}]}},"exports":[{"from":"./directives/checkbox_value_accessor","export":["CheckboxControlValueAccessor"]},{"from":"./directives/control_value_accessor","export":["ControlValueAccessor"]},{"from":"./directives/default_value_accessor","export":["DefaultValueAccessor"]},{"from":"./directives/ng_control","export":["NgControl"]},{"from":"./directives/ng_control_status","export":["NgControlStatus"]},{"from":"./directives/ng_form","export":["NgForm"]},{"from":"./directives/ng_model","export":["NgModel"]},{"from":"./directives/ng_model_group","export":["NgModelGroup"]},{"from":"./directives/number_value_accessor","export":["NumberValueAccessor"]},{"from":"./directives/radio_control_value_accessor","export":["RadioControlValueAccessor"]},{"from":"./directives/reactive_directives/form_control_directive","export":["FormControlDirective"]},{"from":"./directives/reactive_directives/form_control_name","export":["FormControlName"]},{"from":"./directives/reactive_directives/form_group_directive","export":["FormGroupDirective"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormArrayName","FormGroupName"]},{"from":"./directives/select_control_value_accessor","export":["NgSelectOption","SelectControlValueAccessor"]},{"from":"./directives/select_multiple_control_value_accessor","export":["NgSelectMultipleOption","SelectMultipleControlValueAccessor"]},{"from":"./directives/validators","export":["MaxLengthValidator","MinLengthValidator","PatternValidator","RequiredValidator"]}]}
+{"__symbolic":"module","version":1,"metadata":{"SHARED_FORM_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/select_control_value_accessor","name":"NgSelectOption"},{"__symbolic":"reference","module":"./directives/select_multiple_control_value_accessor","name":"NgSelectMultipleOption"},{"__symbolic":"reference","module":"./directives/default_value_accessor","name":"DefaultValueAccessor"},{"__symbolic":"reference","module":"./directives/number_value_accessor","name":"NumberValueAccessor"},{"__symbolic":"reference","module":"./directives/checkbox_value_accessor","name":"CheckboxControlValueAccessor"},{"__symbolic":"reference","module":"./directives/select_control_value_accessor","name":"SelectControlValueAccessor"},{"__symbolic":"reference","module":"./directives/select_multiple_control_value_accessor","name":"SelectMultipleControlValueAccessor"},{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlValueAccessor"},{"__symbolic":"reference","module":"./directives/ng_control_status","name":"NgControlStatus"},{"__symbolic":"reference","module":"./directives/ng_control_status","name":"NgControlStatusGroup"},{"__symbolic":"reference","module":"./directives/validators","name":"RequiredValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"MinLengthValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"MaxLengthValidator"},{"__symbolic":"reference","module":"./directives/validators","name":"PatternValidator"}],"TEMPLATE_DRIVEN_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/ng_model","name":"NgModel"},{"__symbolic":"reference","module":"./directives/ng_model_group","name":"NgModelGroup"},{"__symbolic":"reference","module":"./directives/ng_form","name":"NgForm"}],"REACTIVE_DRIVEN_DIRECTIVES":[{"__symbolic":"reference","module":"./directives/reactive_directives/form_control_directive","name":"FormControlDirective"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_directive","name":"FormGroupDirective"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_control_name","name":"FormControlName"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_name","name":"FormGroupName"},{"__symbolic":"reference","module":"./directives/reactive_directives/form_group_name","name":"FormArrayName"}],"FORM_DIRECTIVES":[{"__symbolic":"reference","name":"TEMPLATE_DRIVEN_DIRECTIVES"},{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}],"REACTIVE_FORM_DIRECTIVES":[{"__symbolic":"reference","name":"REACTIVE_DRIVEN_DIRECTIVES"},{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}],"InternalFormsSharedModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"},"exports":{"__symbolic":"reference","name":"SHARED_FORM_DIRECTIVES"}}]}]}},"exports":[{"from":"./directives/checkbox_value_accessor","export":["CheckboxControlValueAccessor"]},{"from":"./directives/control_value_accessor","export":["ControlValueAccessor"]},{"from":"./directives/default_value_accessor","export":["DefaultValueAccessor"]},{"from":"./directives/ng_control","export":["NgControl"]},{"from":"./directives/ng_control_status","export":["NgControlStatus","NgControlStatusGroup"]},{"from":"./directives/ng_form","export":["NgForm"]},{"from":"./directives/ng_model","export":["NgModel"]},{"from":"./directives/ng_model_group","export":["NgModelGroup"]},{"from":"./directives/number_value_accessor","export":["NumberValueAccessor"]},{"from":"./directives/radio_control_value_accessor","export":["RadioControlValueAccessor"]},{"from":"./directives/reactive_directives/form_control_directive","export":["FormControlDirective"]},{"from":"./directives/reactive_directives/form_control_name","export":["FormControlName"]},{"from":"./directives/reactive_directives/form_group_directive","export":["FormGroupDirective"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormArrayName","FormGroupName"]},{"from":"./directives/select_control_value_accessor","export":["NgSelectOption","SelectControlValueAccessor"]},{"from":"./directives/select_multiple_control_value_accessor","export":["NgSelectMultipleOption","SelectMultipleControlValueAccessor"]},{"from":"./directives/validators","export":["MaxLengthValidator","MinLengthValidator","PatternValidator","RequiredValidator"]}]}

src/directives/abstract_control_directive.d.ts

@@ -15,3 +15,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -31,2 +31,4 @@ export declare abstract class AbstractControlDirective {
     untouched: boolean;
+    disabled: boolean;
+    enabled: boolean;
     statusChanges: Observable<any>;
@@ -33,0 +35,0 @@ valueChanges: Observable<any>;

src/directives/abstract_control_directive.js

@@ -8,5 +8,3 @@ /**
  */
-"use strict";
-var exceptions_1 = require('../facade/exceptions');
-var lang_1 = require('../facade/lang');
+import { isPresent } from '../facade/lang';
 /**
@@ -17,9 +15,9 @@ * Base class for control directives.
  *
- * @experimental
+ * @stable
  */
-var AbstractControlDirective = (function () {
+export var AbstractControlDirective = (function () {
     function AbstractControlDirective() {
     }
     Object.defineProperty(AbstractControlDirective.prototype, "control", {
-        get: function () { return exceptions_1.unimplemented(); },
+        get: function () { throw new Error('unimplemented'); },
         enumerable: true,
@@ -29,3 +27,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "value", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.value : null; },
+        get: function () { return isPresent(this.control) ? this.control.value : null; },
         enumerable: true,
@@ -35,3 +33,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "valid", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.valid : null; },
+        get: function () { return isPresent(this.control) ? this.control.valid : null; },
         enumerable: true,
@@ -41,3 +39,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "invalid", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.invalid : null; },
+        get: function () { return isPresent(this.control) ? this.control.invalid : null; },
         enumerable: true,
@@ -47,3 +45,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "pending", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.pending : null; },
+        get: function () { return isPresent(this.control) ? this.control.pending : null; },
         enumerable: true,
@@ -54,3 +52,3 @@ configurable: true
         get: function () {
-            return lang_1.isPresent(this.control) ? this.control.errors : null;
+            return isPresent(this.control) ? this.control.errors : null;
         },
@@ -61,3 +59,3 @@ enumerable: true,
     Object.defineProperty(AbstractControlDirective.prototype, "pristine", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.pristine : null; },
+        get: function () { return isPresent(this.control) ? this.control.pristine : null; },
         enumerable: true,
@@ -67,3 +65,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "dirty", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.dirty : null; },
+        get: function () { return isPresent(this.control) ? this.control.dirty : null; },
         enumerable: true,
@@ -73,3 +71,3 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "touched", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.touched : null; },
+        get: function () { return isPresent(this.control) ? this.control.touched : null; },
         enumerable: true,
@@ -79,9 +77,19 @@ configurable: true
     Object.defineProperty(AbstractControlDirective.prototype, "untouched", {
-        get: function () { return lang_1.isPresent(this.control) ? this.control.untouched : null; },
+        get: function () { return isPresent(this.control) ? this.control.untouched : null; },
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(AbstractControlDirective.prototype, "disabled", {
+        get: function () { return isPresent(this.control) ? this.control.disabled : null; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AbstractControlDirective.prototype, "enabled", {
+        get: function () { return isPresent(this.control) ? this.control.enabled : null; },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(AbstractControlDirective.prototype, "statusChanges", {
         get: function () {
-            return lang_1.isPresent(this.control) ? this.control.statusChanges : null;
+            return isPresent(this.control) ? this.control.statusChanges : null;
         },
@@ -93,3 +101,3 @@ enumerable: true,
         get: function () {
-            return lang_1.isPresent(this.control) ? this.control.valueChanges : null;
+            return isPresent(this.control) ? this.control.valueChanges : null;
         },
@@ -106,3 +114,3 @@ enumerable: true,
         if (value === void 0) { value = undefined; }
-        if (lang_1.isPresent(this.control))
+        if (isPresent(this.control))
             this.control.reset(value);
@@ -112,3 +120,2 @@ };
 }());
-exports.AbstractControlDirective = AbstractControlDirective;
 //# sourceMappingURL=abstract_control_directive.js.map

src/directives/abstract_form_group_directive.d.ts

@@ -16,3 +16,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -19,0 +19,0 @@ export declare class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy {

src/directives/abstract_form_group_directive.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,10 +14,10 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var control_container_1 = require('./control_container');
-var shared_1 = require('./shared');
+import { ControlContainer } from './control_container';
+import { composeAsyncValidators, composeValidators, controlPath } from './shared';
 /**
  * This is a base class for code shared between {@link NgModelGroup} and {@link FormGroupName}.
  *
- * @experimental
+ * @stable
  */
-var AbstractFormGroupDirective = (function (_super) {
+export var AbstractFormGroupDirective = (function (_super) {
     __extends(AbstractFormGroupDirective, _super);
@@ -32,3 +31,7 @@ function AbstractFormGroupDirective() {
     };
-    AbstractFormGroupDirective.prototype.ngOnDestroy = function () { this.formDirective.removeFormGroup(this); };
+    AbstractFormGroupDirective.prototype.ngOnDestroy = function () {
+        if (this.formDirective) {
+            this.formDirective.removeFormGroup(this);
+        }
+    };
     Object.defineProperty(AbstractFormGroupDirective.prototype, "control", {
@@ -46,3 +49,3 @@ /**
          */
-        get: function () { return shared_1.controlPath(this.name, this._parent); },
+        get: function () { return controlPath(this.name, this._parent); },
         enumerable: true,
@@ -55,3 +58,3 @@ configurable: true
          */
-        get: function () { return this._parent.formDirective; },
+        get: function () { return this._parent ? this._parent.formDirective : null; },
         enumerable: true,
@@ -61,3 +64,3 @@ configurable: true
     Object.defineProperty(AbstractFormGroupDirective.prototype, "validator", {
-        get: function () { return shared_1.composeValidators(this._validators); },
+        get: function () { return composeValidators(this._validators); },
         enumerable: true,
@@ -67,3 +70,3 @@ configurable: true
     Object.defineProperty(AbstractFormGroupDirective.prototype, "asyncValidator", {
-        get: function () { return shared_1.composeAsyncValidators(this._asyncValidators); },
+        get: function () { return composeAsyncValidators(this._asyncValidators); },
         enumerable: true,
@@ -75,4 +78,3 @@ configurable: true
     return AbstractFormGroupDirective;
-}(control_container_1.ControlContainer));
-exports.AbstractFormGroupDirective = AbstractFormGroupDirective;
+}(ControlContainer));
 //# sourceMappingURL=abstract_form_group_directive.js.map

src/directives/checkbox_value_accessor.d.ts

@@ -19,3 +19,3 @@ /**
  *
- *  @experimental
+ *  @stable
  */
@@ -31,2 +31,3 @@ export declare class CheckboxControlValueAccessor implements ControlValueAccessor {
     registerOnTouched(fn: () => {}): void;
+    setDisabledState(isDisabled: boolean): void;
 }

src/directives/checkbox_value_accessor.js

@@ -8,11 +8,20 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var control_value_accessor_1 = require('./control_value_accessor');
-exports.CHECKBOX_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return CheckboxControlValueAccessor; }),
+import { Directive, ElementRef, Renderer, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+export var CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return CheckboxControlValueAccessor; }),
     multi: true
 };
-var CheckboxControlValueAccessor = (function () {
+/**
+ * The accessor for writing a value and listening to changes on a checkbox input element.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="checkbox" name="rememberLogin" ngModel>
+ *  ```
+ *
+ *  @stable
+ */
+export var CheckboxControlValueAccessor = (function () {
     function CheckboxControlValueAccessor(_renderer, _elementRef) {
@@ -29,8 +38,10 @@ this._renderer = _renderer;
     CheckboxControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
-    /** @nocollapse */
+    CheckboxControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     CheckboxControlValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]',
                     host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
-                    providers: [exports.CHECKBOX_VALUE_ACCESSOR]
+                    providers: [CHECKBOX_VALUE_ACCESSOR]
                 },] },
@@ -40,8 +51,7 @@ ];
     CheckboxControlValueAccessor.ctorParameters = [
-        { type: core_1.Renderer, },
-        { type: core_1.ElementRef, },
+        { type: Renderer, },
+        { type: ElementRef, },
     ];
     return CheckboxControlValueAccessor;
 }());
-exports.CheckboxControlValueAccessor = CheckboxControlValueAccessor;
 //# sourceMappingURL=checkbox_value_accessor.js.map

src/directives/checkbox_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"CHECKBOX_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CheckboxControlValueAccessor"},"multi":true},"CheckboxControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]","host":{"(change)":"onChange($event.target.checked)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"CHECKBOX_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"CHECKBOX_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CheckboxControlValueAccessor"},"multi":true},"CheckboxControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]","host":{"(change)":"onChange($event.target.checked)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"CHECKBOX_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}}}}

src/directives/control_container.d.ts

@@ -15,3 +15,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -18,0 +18,0 @@ export declare class ControlContainer extends AbstractControlDirective {

src/directives/control_container.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,3 +14,3 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var abstract_control_directive_1 = require('./abstract_control_directive');
+import { AbstractControlDirective } from './abstract_control_directive';
 /**
@@ -22,5 +21,5 @@ * A directive that contains multiple {@link NgControl}s.
  *
- * @experimental
+ * @stable
  */
-var ControlContainer = (function (_super) {
+export var ControlContainer = (function (_super) {
     __extends(ControlContainer, _super);
@@ -47,4 +46,3 @@ function ControlContainer() {
     return ControlContainer;
-}(abstract_control_directive_1.AbstractControlDirective));
-exports.ControlContainer = ControlContainer;
+}(AbstractControlDirective));
 //# sourceMappingURL=control_container.js.map

src/directives/control_value_accessor.d.ts

@@ -17,3 +17,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -33,2 +33,9 @@ export interface ControlValueAccessor {
     registerOnTouched(fn: any): void;
+    /**
+     * This function is called when the control status changes to or from "DISABLED".
+     * Depending on the value, it will enable or disable the appropriate DOM element.
+     *
+     * @param isDisabled
+     */
+    setDisabledState?(isDisabled: boolean): void;
 }
@@ -39,4 +46,4 @@ /**
  * See {@link DefaultValueAccessor} for how to implement one.
- * @experimental
+ * @stable
  */
 export declare const NG_VALUE_ACCESSOR: OpaqueToken;

src/directives/control_value_accessor.js

@@ -8,4 +8,3 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
+import { OpaqueToken } from '@angular/core';
 /**
@@ -15,5 +14,5 @@ * Used to provide a {@link ControlValueAccessor} for form controls.
  * See {@link DefaultValueAccessor} for how to implement one.
- * @experimental
+ * @stable
  */
-exports.NG_VALUE_ACCESSOR = new core_1.OpaqueToken('NgValueAccessor');
+export var NG_VALUE_ACCESSOR = new OpaqueToken('NgValueAccessor');
 //# sourceMappingURL=control_value_accessor.js.map

src/directives/default_value_accessor.d.ts

@@ -20,3 +20,3 @@ /**
  *
- *  @experimental
+ *  @stable
  */
@@ -32,2 +32,3 @@ export declare class DefaultValueAccessor implements ControlValueAccessor {
     registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
 }

src/directives/default_value_accessor.js

@@ -8,12 +8,22 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var lang_1 = require('../facade/lang');
-var control_value_accessor_1 = require('./control_value_accessor');
-exports.DEFAULT_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return DefaultValueAccessor; }),
+import { Directive, ElementRef, Renderer, forwardRef } from '@angular/core';
+import { isBlank } from '../facade/lang';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+export var DEFAULT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return DefaultValueAccessor; }),
     multi: true
 };
-var DefaultValueAccessor = (function () {
+/**
+ * The default accessor for writing a value and listening to changes that is used by the
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="text" name="searchQuery" ngModel>
+ *  ```
+ *
+ *  @stable
+ */
+export var DefaultValueAccessor = (function () {
     function DefaultValueAccessor(_renderer, _elementRef) {
@@ -26,3 +36,3 @@ this._renderer = _renderer;
     DefaultValueAccessor.prototype.writeValue = function (value) {
-        var normalizedValue = lang_1.isBlank(value) ? '' : value;
+        var normalizedValue = isBlank(value) ? '' : value;
         this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
@@ -32,5 +42,7 @@ };
     DefaultValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
-    /** @nocollapse */
+    DefaultValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     DefaultValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]',
@@ -41,3 +53,3 @@ // TODO: vsavkin replace the above selector with the one below it once
                     host: { '(input)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
-                    providers: [exports.DEFAULT_VALUE_ACCESSOR]
+                    providers: [DEFAULT_VALUE_ACCESSOR]
                 },] },
@@ -47,8 +59,7 @@ ];
     DefaultValueAccessor.ctorParameters = [
-        { type: core_1.Renderer, },
-        { type: core_1.ElementRef, },
+        { type: Renderer, },
+        { type: ElementRef, },
     ];
     return DefaultValueAccessor;
 }());
-exports.DefaultValueAccessor = DefaultValueAccessor;
 //# sourceMappingURL=default_value_accessor.js.map

src/directives/default_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"DEFAULT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DefaultValueAccessor"},"multi":true},"DefaultValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]","host":{"(input)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"DEFAULT_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"DEFAULT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"DefaultValueAccessor"},"multi":true},"DefaultValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]","host":{"(input)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"DEFAULT_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}}}}

src/directives/error_examples.js

@@ -8,4 +8,3 @@ /**
  */
-"use strict";
-exports.FormErrorExamples = {
+export var FormErrorExamples = {
     formControlName: "\n    <div [formGroup]=\"myGroup\">\n      <input formControlName=\"firstName\">\n    </div>\n\n    In your class:\n\n    this.myGroup = new FormGroup({\n       firstName: new FormControl()\n    });",
@@ -12,0 +11,0 @@ formGroupName: "\n    <div [formGroup]=\"myGroup\">\n       <div formGroupName=\"person\">\n          <input formControlName=\"firstName\">\n       </div>\n    </div>\n\n    In your class:\n\n    this.myGroup = new FormGroup({\n       person: new FormGroup({ firstName: new FormControl() })\n    });",

src/directives/form_interface.d.ts

@@ -16,3 +16,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -19,0 +19,0 @@ export interface Form {

src/directives/form_interface.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 //# sourceMappingURL=form_interface.js.map

src/directives/ng_control_status.d.ts

@@ -0,11 +1,7 @@
+import { AbstractControlDirective } from './abstract_control_directive';
+import { ControlContainer } from './control_container';
 import { NgControl } from './ng_control';
-/**
- * Directive automatically applied to Angular forms that sets CSS classes
- * based on control status (valid/invalid/dirty/etc).
- *
- * @experimental
- */
-export declare class NgControlStatus {
+export declare class AbstractControlStatus {
     private _cd;
-    constructor(cd: NgControl);
+    constructor(cd: AbstractControlDirective);
     ngClassUntouched: boolean;
@@ -18,1 +14,27 @@ ngClassTouched: boolean;
 }
+export declare const ngControlStatusHost: {
+    '[class.ng-untouched]': string;
+    '[class.ng-touched]': string;
+    '[class.ng-pristine]': string;
+    '[class.ng-dirty]': string;
+    '[class.ng-valid]': string;
+    '[class.ng-invalid]': string;
+};
+/**
+ * Directive automatically applied to Angular form controls that sets CSS classes
+ * based on control status (valid/invalid/dirty/etc).
+ *
+ * @stable
+ */
+export declare class NgControlStatus extends AbstractControlStatus {
+    constructor(cd: NgControl);
+}
+/**
+ * Directive automatically applied to Angular form groups that sets CSS classes
+ * based on control status (valid/invalid/dirty/etc).
+ *
+ * @stable
+ */
+export declare class NgControlStatusGroup extends AbstractControlStatus {
+    constructor(cd: ControlContainer);
+}

src/directives/ng_control_status.js

@@ -8,13 +8,18 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var lang_1 = require('../facade/lang');
-var ng_control_1 = require('./ng_control');
-var NgControlStatus = (function () {
-    function NgControlStatus(cd) {
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+import { Directive, Self } from '@angular/core';
+import { isPresent } from '../facade/lang';
+import { ControlContainer } from './control_container';
+import { NgControl } from './ng_control';
+export var AbstractControlStatus = (function () {
+    function AbstractControlStatus(cd) {
         this._cd = cd;
     }
-    Object.defineProperty(NgControlStatus.prototype, "ngClassUntouched", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassUntouched", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? this._cd.control.untouched : false;
+            return isPresent(this._cd.control) ? this._cd.control.untouched : false;
         },
@@ -24,5 +29,5 @@ enumerable: true,
     });
-    Object.defineProperty(NgControlStatus.prototype, "ngClassTouched", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassTouched", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? this._cd.control.touched : false;
+            return isPresent(this._cd.control) ? this._cd.control.touched : false;
         },
@@ -32,5 +37,5 @@ enumerable: true,
     });
-    Object.defineProperty(NgControlStatus.prototype, "ngClassPristine", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassPristine", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? this._cd.control.pristine : false;
+            return isPresent(this._cd.control) ? this._cd.control.pristine : false;
         },
@@ -40,5 +45,5 @@ enumerable: true,
     });
-    Object.defineProperty(NgControlStatus.prototype, "ngClassDirty", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassDirty", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? this._cd.control.dirty : false;
+            return isPresent(this._cd.control) ? this._cd.control.dirty : false;
         },
@@ -48,5 +53,5 @@ enumerable: true,
     });
-    Object.defineProperty(NgControlStatus.prototype, "ngClassValid", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassValid", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? this._cd.control.valid : false;
+            return isPresent(this._cd.control) ? this._cd.control.valid : false;
         },
@@ -56,5 +61,5 @@ enumerable: true,
     });
-    Object.defineProperty(NgControlStatus.prototype, "ngClassInvalid", {
+    Object.defineProperty(AbstractControlStatus.prototype, "ngClassInvalid", {
         get: function () {
-            return lang_1.isPresent(this._cd.control) ? !this._cd.control.valid : false;
+            return isPresent(this._cd.control) ? this._cd.control.invalid : false;
         },
@@ -64,23 +69,55 @@ enumerable: true,
     });
-    /** @nocollapse */
+    return AbstractControlStatus;
+}());
+export var ngControlStatusHost = {
+    '[class.ng-untouched]': 'ngClassUntouched',
+    '[class.ng-touched]': 'ngClassTouched',
+    '[class.ng-pristine]': 'ngClassPristine',
+    '[class.ng-dirty]': 'ngClassDirty',
+    '[class.ng-valid]': 'ngClassValid',
+    '[class.ng-invalid]': 'ngClassInvalid'
+};
+/**
+ * Directive automatically applied to Angular form controls that sets CSS classes
+ * based on control status (valid/invalid/dirty/etc).
+ *
+ * @stable
+ */
+export var NgControlStatus = (function (_super) {
+    __extends(NgControlStatus, _super);
+    function NgControlStatus(cd) {
+        _super.call(this, cd);
+    }
     NgControlStatus.decorators = [
-        { type: core_1.Directive, args: [{
-                    selector: '[formControlName],[ngModel],[formControl]',
-                    host: {
-                        '[class.ng-untouched]': 'ngClassUntouched',
-                        '[class.ng-touched]': 'ngClassTouched',
-                        '[class.ng-pristine]': 'ngClassPristine',
-                        '[class.ng-dirty]': 'ngClassDirty',
-                        '[class.ng-valid]': 'ngClassValid',
-                        '[class.ng-invalid]': 'ngClassInvalid'
-                    }
-                },] },
+        { type: Directive, args: [{ selector: '[formControlName],[ngModel],[formControl]', host: ngControlStatusHost },] },
     ];
     /** @nocollapse */
     NgControlStatus.ctorParameters = [
-        { type: ng_control_1.NgControl, decorators: [{ type: core_1.Self },] },
+        { type: NgControl, decorators: [{ type: Self },] },
     ];
     return NgControlStatus;
-}());
-exports.NgControlStatus = NgControlStatus;
+}(AbstractControlStatus));
+/**
+ * Directive automatically applied to Angular form groups that sets CSS classes
+ * based on control status (valid/invalid/dirty/etc).
+ *
+ * @stable
+ */
+export var NgControlStatusGroup = (function (_super) {
+    __extends(NgControlStatusGroup, _super);
+    function NgControlStatusGroup(cd) {
+        _super.call(this, cd);
+    }
+    NgControlStatusGroup.decorators = [
+        { type: Directive, args: [{
+                    selector: '[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]',
+                    host: ngControlStatusHost
+                },] },
+    ];
+    /** @nocollapse */
+    NgControlStatusGroup.ctorParameters = [
+        { type: ControlContainer, decorators: [{ type: Self },] },
+    ];
+    return NgControlStatusGroup;
+}(AbstractControlStatus));
 //# sourceMappingURL=ng_control_status.js.map

src/directives/ng_control_status.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NgControlStatus":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControlName],[ngModel],[formControl]","host":{"[class.ng-untouched]":"ngClassUntouched","[class.ng-touched]":"ngClassTouched","[class.ng-pristine]":"ngClassPristine","[class.ng-dirty]":"ngClassDirty","[class.ng-valid]":"ngClassValid","[class.ng-invalid]":"ngClassInvalid"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"./ng_control","name":"NgControl"}]}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"ngControlStatusHost":{"[class.ng-untouched]":"ngClassUntouched","[class.ng-touched]":"ngClassTouched","[class.ng-pristine]":"ngClassPristine","[class.ng-dirty]":"ngClassDirty","[class.ng-valid]":"ngClassValid","[class.ng-invalid]":"ngClassInvalid"},"NgControlStatus":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControlName],[ngModel],[formControl]","host":{"__symbolic":"reference","name":"ngControlStatusHost"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"./ng_control","name":"NgControl"}]}]}},"NgControlStatusGroup":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]","host":{"__symbolic":"reference","name":"ngControlStatusHost"}}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}}]],"parameters":[{"__symbolic":"reference","module":"./control_container","name":"ControlContainer"}]}]}}}}

src/directives/ng_control.d.ts

@@ -0,1 +1,8 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
 import { AbstractControlDirective } from './abstract_control_directive';
@@ -6,7 +13,7 @@ import { ControlValueAccessor } from './control_value_accessor';
  * A base class that all control directive extend.
- * It binds a {@link Control} object to a DOM element.
+ * It binds a {@link FormControl} object to a DOM element.
  *
  * Used internally by Angular forms.
  *
- * @experimental
+ * @stable
  */
@@ -13,0 +20,0 @@ export declare abstract class NgControl extends AbstractControlDirective {

src/directives/ng_control.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,21 +14,29 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var exceptions_1 = require('../facade/exceptions');
-var abstract_control_directive_1 = require('./abstract_control_directive');
+import { AbstractControlDirective } from './abstract_control_directive';
+function unimplemented() {
+    throw new Error('unimplemented');
+}
 /**
  * A base class that all control directive extend.
- * It binds a {@link Control} object to a DOM element.
+ * It binds a {@link FormControl} object to a DOM element.
  *
  * Used internally by Angular forms.
  *
- * @experimental
+ * @stable
  */
-var NgControl = (function (_super) {
+export var NgControl = (function (_super) {
     __extends(NgControl, _super);
     function NgControl() {
         _super.apply(this, arguments);
+        /** @internal */
+        this._parent = null;
         this.name = null;
         this.valueAccessor = null;
+        /** @internal */
+        this._rawValidators = [];
+        /** @internal */
+        this._rawAsyncValidators = [];
     }
     Object.defineProperty(NgControl.prototype, "validator", {
-        get: function () { return exceptions_1.unimplemented(); },
+        get: function () { return unimplemented(); },
         enumerable: true,
@@ -39,3 +46,3 @@ configurable: true
     Object.defineProperty(NgControl.prototype, "asyncValidator", {
-        get: function () { return exceptions_1.unimplemented(); },
+        get: function () { return unimplemented(); },
         enumerable: true,
@@ -45,4 +52,3 @@ configurable: true
     return NgControl;
-}(abstract_control_directive_1.AbstractControlDirective));
-exports.NgControl = NgControl;
+}(AbstractControlDirective));
 //# sourceMappingURL=ng_control.js.map

src/directives/ng_form.d.ts

@@ -66,3 +66,3 @@ import { EventEmitter } from '../facade/async';
  *
- *  @experimental
+ *  @stable
  */
@@ -93,2 +93,3 @@ export declare class NgForm extends ControlContainer implements Form {
     onReset(): void;
+    resetForm(value?: any): void;
 }

src/directives/ng_form.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,16 +14,75 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var async_1 = require('../facade/async');
-var collection_1 = require('../facade/collection');
-var lang_1 = require('../facade/lang');
-var model_1 = require('../model');
-var validators_1 = require('../validators');
-var control_container_1 = require('./control_container');
-var shared_1 = require('./shared');
-exports.formDirectiveProvider = {
-    provide: control_container_1.ControlContainer,
-    useExisting: core_1.forwardRef(function () { return NgForm; })
+import { Directive, Inject, Optional, Self, forwardRef } from '@angular/core';
+import { EventEmitter } from '../facade/async';
+import { ListWrapper } from '../facade/collection';
+import { isPresent } from '../facade/lang';
+import { FormGroup } from '../model';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../validators';
+import { ControlContainer } from './control_container';
+import { composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer } from './shared';
+export var formDirectiveProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(function () { return NgForm; })
 };
 var resolvedPromise = Promise.resolve(null);
-var NgForm = (function (_super) {
+/**
+ * If `NgForm` is bound in a component, `<form>` elements in that component will be
+ * upgraded to use the Angular form system.
+ *
+ * ### Typical Use
+ *
+ * Include `FORM_DIRECTIVES` in the `directives` section of a {@link Component} annotation
+ * to use `NgForm` and its associated controls.
+ *
+ * ### Structure
+ *
+ * An Angular form is a collection of `FormControl`s in some hierarchy.
+ * `FormControl`s can be at the top level or can be organized in `FormGroup`s
+ * or `FormArray`s. This hierarchy is reflected in the form's `value`, a
+ * JSON object that mirrors the form structure.
+ *
+ * ### Submission
+ *
+ * The `ngSubmit` event signals when the user triggers a form submission.
+ *
+ *  ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <p>Submit the form to see the data object Angular builds</p>
+ *       <h2>NgForm demo</h2>
+ *       <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
+ *         <h3>Control group: credentials</h3>
+ *         <div ngModelGroup="credentials">
+ *           <p>Login: <input type="text" name="login" ngModel></p>
+ *           <p>Password: <input type="password" name="password" ngModel></p>
+ *         </div>
+ *         <h3>Control group: person</h3>
+ *         <div ngModelGroup="person">
+ *           <p>First name: <input type="text" name="firstName" ngModel></p>
+ *           <p>Last name: <input type="text" name="lastName" ngModel></p>
+ *         </div>
+ *         <button type="submit">Submit Form</button>
+ *       <p>Form data submitted:</p>
+ *       </form>
+ *       <pre>{{data}}</pre>
+ *     </div>
+ * `,
+ *   directives: []
+ * })
+ * export class App {
+ *   constructor() {}
+ *
+ *   data: string;
+ *
+ *   onSubmit(data) {
+ *     this.data = JSON.stringify(data, null, 2);
+ *   }
+ * }
+ *  ```
+ *
+ *  @stable
+ */
+export var NgForm = (function (_super) {
     __extends(NgForm, _super);
@@ -34,4 +92,5 @@ function NgForm(validators, asyncValidators) {
         this._submitted = false;
-        this.ngSubmit = new async_1.EventEmitter();
-        this.form = new model_1.FormGroup({}, null, shared_1.composeValidators(validators), shared_1.composeAsyncValidators(asyncValidators));
+        this.ngSubmit = new EventEmitter();
+        this.form =
+            new FormGroup({}, composeValidators(validators), composeAsyncValidators(asyncValidators));
     }
@@ -68,3 +127,3 @@ Object.defineProperty(NgForm.prototype, "submitted", {
             dir._control = container.registerControl(dir.name, dir.control);
-            shared_1.setUpControl(dir.control, dir);
+            setUpControl(dir.control, dir);
             dir.control.updateValueAndValidity({ emitEvent: false });
@@ -78,3 +137,3 @@ });
             var container = _this._findContainer(dir.path);
-            if (lang_1.isPresent(container)) {
+            if (isPresent(container)) {
                 container.removeControl(dir.name);
@@ -88,4 +147,4 @@ }
             var container = _this._findContainer(dir.path);
-            var group = new model_1.FormGroup({});
-            shared_1.setUpFormContainer(group, dir);
+            var group = new FormGroup({});
+            setUpFormContainer(group, dir);
             container.registerControl(dir.name, group);
@@ -99,3 +158,3 @@ group.updateValueAndValidity({ emitEvent: false });
             var container = _this._findContainer(dir.path);
-            if (lang_1.isPresent(container)) {
+            if (isPresent(container)) {
                 container.removeControl(dir.name);
@@ -119,13 +178,17 @@ }
     };
-    NgForm.prototype.onReset = function () { this.form.reset(); };
+    NgForm.prototype.onReset = function () { this.resetForm(); };
+    NgForm.prototype.resetForm = function (value) {
+        if (value === void 0) { value = undefined; }
+        this.form.reset(value);
+        this._submitted = false;
+    };
     /** @internal */
     NgForm.prototype._findContainer = function (path) {
         path.pop();
-        return collection_1.ListWrapper.isEmpty(path) ? this.form : this.form.get(path);
+        return ListWrapper.isEmpty(path) ? this.form : this.form.get(path);
     };
-    /** @nocollapse */
     NgForm.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
-                    providers: [exports.formDirectiveProvider],
+                    providers: [formDirectiveProvider],
                     host: { '(submit)': 'onSubmit()', '(reset)': 'onReset()' },
@@ -138,8 +201,7 @@ outputs: ['ngSubmit'],
     NgForm.ctorParameters = [
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
     ];
     return NgForm;
-}(control_container_1.ControlContainer));
-exports.NgForm = NgForm;
+}(ControlContainer));
 //# sourceMappingURL=ng_form.js.map

src/directives/ng_form.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"formDirectiveProvider":{"provide":{"__symbolic":"reference","module":"./control_container","name":"ControlContainer"},"useExisting":{"__symbolic":"reference","name":"NgForm"}},"NgForm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]","providers":[{"__symbolic":"reference","name":"formDirectiveProvider"}],"host":{"(submit)":"onSubmit()","(reset)":"onReset()"},"outputs":["ngSubmit"],"exportAs":"ngForm"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_ASYNC_VALIDATORS"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"addControl":[{"__symbolic":"method"}],"getControl":[{"__symbolic":"method"}],"removeControl":[{"__symbolic":"method"}],"addFormGroup":[{"__symbolic":"method"}],"removeFormGroup":[{"__symbolic":"method"}],"getFormGroup":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"_findContainer":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"formDirectiveProvider":{"provide":{"__symbolic":"reference","module":"./control_container","name":"ControlContainer"},"useExisting":{"__symbolic":"reference","name":"NgForm"}},"NgForm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]","providers":[{"__symbolic":"reference","name":"formDirectiveProvider"}],"host":{"(submit)":"onSubmit()","(reset)":"onReset()"},"outputs":["ngSubmit"],"exportAs":"ngForm"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_ASYNC_VALIDATORS"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"addControl":[{"__symbolic":"method"}],"getControl":[{"__symbolic":"method"}],"removeControl":[{"__symbolic":"method"}],"addFormGroup":[{"__symbolic":"method"}],"removeFormGroup":[{"__symbolic":"method"}],"getFormGroup":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"resetForm":[{"__symbolic":"method"}],"_findContainer":[{"__symbolic":"method"}]}}}}

src/directives/ng_model_group.d.ts

@@ -31,3 +31,3 @@ /**
  *         <h3>Name value:</h3>
- *         <pre>{{ mgName | json }}</pre>
+ *         <pre>{{ mgName.value | json }}</pre>
  *         <p>Name is {{mgName?.valid ? "valid" : "invalid"}}</p>
@@ -37,3 +37,3 @@ *         <h3>What's your favorite food?</h3>
  *         <h3>Form value</h3>
- *         <pre>{{ f | json }}</pre>
+ *         <pre>{{ f.value | json }}</pre>
  *       </form>
@@ -49,3 +49,3 @@ *     </div>
  *
- * @experimental
+ * @stable
  */
@@ -52,0 +52,0 @@ export declare class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {

src/directives/ng_model_group.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,13 +14,50 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var validators_1 = require('../validators');
-var abstract_form_group_directive_1 = require('./abstract_form_group_directive');
-var control_container_1 = require('./control_container');
-var ng_form_1 = require('./ng_form');
-var template_driven_errors_1 = require('./template_driven_errors');
-exports.modelGroupProvider = {
-    provide: control_container_1.ControlContainer,
-    useExisting: core_1.forwardRef(function () { return NgModelGroup; })
+import { Directive, Host, Inject, Input, Optional, Self, SkipSelf, forwardRef } from '@angular/core';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../validators';
+import { AbstractFormGroupDirective } from './abstract_form_group_directive';
+import { ControlContainer } from './control_container';
+import { NgForm } from './ng_form';
+import { TemplateDrivenErrors } from './template_driven_errors';
+export var modelGroupProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(function () { return NgModelGroup; })
 };
-var NgModelGroup = (function (_super) {
+/**
+ * Creates and binds a model group to a DOM element.
+ *
+ * This directive can only be used as a child of {@link NgForm}.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <h2>Angular forms Example</h2>
+ *       <form #f="ngForm">
+ *         <div ngModelGroup="name" #mgName="ngModelGroup">
+ *           <h3>Enter your name:</h3>
+ *           <p>First: <input name="first" ngModel required></p>
+ *           <p>Middle: <input name="middle" ngModel></p>
+ *           <p>Last: <input name="last" ngModel required></p>
+ *         </div>
+ *         <h3>Name value:</h3>
+ *         <pre>{{ mgName.value | json }}</pre>
+ *         <p>Name is {{mgName?.valid ? "valid" : "invalid"}}</p>
+ *         <h3>What's your favorite food?</h3>
+ *         <p><input name="food" ngModel></p>
+ *         <h3>Form value</h3>
+ *         <pre>{{ f.value | json }}</pre>
+ *       </form>
+ *     </div>
+ *   `
+ * })
+ * export class App {}
+ * ```
+ *
+ * This example declares a model group for a user's name. The value and validation state of
+ * this group can be accessed separately from the overall form.
+ *
+ * @stable
+ */
+export var NgModelGroup = (function (_super) {
     __extends(NgModelGroup, _super);
@@ -36,23 +72,20 @@ function NgModelGroup(parent, validators, asyncValidators) {
     NgModelGroup.prototype._checkParentType = function () {
-        if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof ng_form_1.NgForm)) {
-            template_driven_errors_1.TemplateDrivenErrors.modelGroupParentException();
+        if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
+            TemplateDrivenErrors.modelGroupParentException();
         }
     };
-    /** @nocollapse */
     NgModelGroup.decorators = [
-        { type: core_1.Directive, args: [{ selector: '[ngModelGroup]', providers: [exports.modelGroupProvider], exportAs: 'ngModelGroup' },] },
+        { type: Directive, args: [{ selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup' },] },
     ];
     /** @nocollapse */
     NgModelGroup.ctorParameters = [
-        { type: control_container_1.ControlContainer, decorators: [{ type: core_1.Host }, { type: core_1.SkipSelf },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
+        { type: ControlContainer, decorators: [{ type: Host }, { type: SkipSelf },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
     ];
-    /** @nocollapse */
     NgModelGroup.propDecorators = {
-        'name': [{ type: core_1.Input, args: ['ngModelGroup',] },],
+        'name': [{ type: Input, args: ['ngModelGroup',] },],
     };
     return NgModelGroup;
-}(abstract_form_group_directive_1.AbstractFormGroupDirective));
-exports.NgModelGroup = NgModelGroup;
+}(AbstractFormGroupDirective));
 //# sourceMappingURL=ng_model_group.js.map

src/directives/ng_model.d.ts

@@ -14,3 +14,3 @@ /**
 import { NgControl } from './ng_control';
-import { AsyncValidatorFn, ValidatorFn } from './validators';
+import { AsyncValidatorFn, Validator, ValidatorFn } from './validators';
 export declare const formControlBinding: any;
@@ -37,11 +37,9 @@ /**
  *
- *  @experimental
+ *  @stable
  */
 export declare class NgModel extends NgControl implements OnChanges, OnDestroy {
-    private _parent;
-    private _validators;
-    private _asyncValidators;
     viewModel: any;
+    name: string;
+    isDisabled: boolean;
     model: any;
-    name: string;
     options: {
@@ -52,3 +50,3 @@ name?: string;
     update: EventEmitter<{}>;
-    constructor(_parent: ControlContainer, _validators: any[], _asyncValidators: any[], valueAccessors: ControlValueAccessor[]);
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<Validator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -69,2 +67,3 @@ ngOnDestroy(): void;
     private _updateValue(value);
+    private _updateDisabled(changes);
 }

src/directives/ng_model.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,32 +14,54 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var async_1 = require('../facade/async');
-var model_1 = require('../model');
-var validators_1 = require('../validators');
-var abstract_form_group_directive_1 = require('./abstract_form_group_directive');
-var control_container_1 = require('./control_container');
-var control_value_accessor_1 = require('./control_value_accessor');
-var ng_control_1 = require('./ng_control');
-var ng_form_1 = require('./ng_form');
-var ng_model_group_1 = require('./ng_model_group');
-var shared_1 = require('./shared');
-var template_driven_errors_1 = require('./template_driven_errors');
-exports.formControlBinding = {
-    provide: ng_control_1.NgControl,
-    useExisting: core_1.forwardRef(function () { return NgModel; })
+import { Directive, Host, Inject, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { EventEmitter } from '../facade/async';
+import { FormControl } from '../model';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../validators';
+import { AbstractFormGroupDirective } from './abstract_form_group_directive';
+import { ControlContainer } from './control_container';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+import { NgControl } from './ng_control';
+import { NgForm } from './ng_form';
+import { NgModelGroup } from './ng_model_group';
+import { composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor, setUpControl } from './shared';
+import { TemplateDrivenErrors } from './template_driven_errors';
+export var formControlBinding = {
+    provide: NgControl,
+    useExisting: forwardRef(function () { return NgModel; })
 };
 var resolvedPromise = Promise.resolve(null);
-var NgModel = (function (_super) {
+/**
+ * Binds a domain model to a form control.
+ *
+ * ### Usage
+ *
+ * `ngModel` binds an existing domain model to a form control. For a
+ * two-way binding, use `[(ngModel)]` to ensure the model updates in
+ * both directions.
+ *
+ *  ```typescript
+ * @Component({
+ *      selector: "search-comp",
+ *      directives: [],
+ *      template: `<input type='text' [(ngModel)]="searchQuery">`
+ *      })
+ * class SearchComp {
+ *  searchQuery: string;
+ * }
+ *  ```
+ *
+ *  @stable
+ */
+export var NgModel = (function (_super) {
     __extends(NgModel, _super);
-    function NgModel(_parent, _validators, _asyncValidators, valueAccessors) {
+    function NgModel(parent, validators, asyncValidators, valueAccessors) {
         _super.call(this);
-        this._parent = _parent;
-        this._validators = _validators;
-        this._asyncValidators = _asyncValidators;
         /** @internal */
-        this._control = new model_1.FormControl();
+        this._control = new FormControl();
         /** @internal */
         this._registered = false;
-        this.update = new async_1.EventEmitter();
-        this.valueAccessor = shared_1.selectValueAccessor(this, valueAccessors);
+        this.update = new EventEmitter();
+        this._parent = parent;
+        this._rawValidators = validators || [];
+        this._rawAsyncValidators = asyncValidators || [];
+        this.valueAccessor = selectValueAccessor(this, valueAccessors);
     }
@@ -51,3 +72,6 @@ NgModel.prototype.ngOnChanges = function (changes) {
             this._setUpControl();
-        if (shared_1.isPropertyUpdated(changes, this.viewModel)) {
+        if ('isDisabled' in changes) {
+            this._updateDisabled(changes);
+        }
+        if (isPropertyUpdated(changes, this.viewModel)) {
             this._updateValue(this.model);
@@ -65,3 +89,3 @@ this.viewModel = this.model;
         get: function () {
-            return this._parent ? shared_1.controlPath(this.name, this._parent) : [this.name];
+            return this._parent ? controlPath(this.name, this._parent) : [this.name];
         },
@@ -77,3 +101,3 @@ enumerable: true,
     Object.defineProperty(NgModel.prototype, "validator", {
-        get: function () { return shared_1.composeValidators(this._validators); },
+        get: function () { return composeValidators(this._rawValidators); },
         enumerable: true,
@@ -84,3 +108,3 @@ configurable: true
         get: function () {
-            return shared_1.composeAsyncValidators(this._asyncValidators);
+            return composeAsyncValidators(this._rawAsyncValidators);
         },
@@ -103,3 +127,3 @@ enumerable: true,
     NgModel.prototype._setUpStandalone = function () {
-        shared_1.setUpControl(this._control, this);
+        setUpControl(this._control, this);
         this._control.updateValueAndValidity({ emitEvent: false });
@@ -114,8 +138,8 @@ };
     NgModel.prototype._checkParentType = function () {
-        if (!(this._parent instanceof ng_model_group_1.NgModelGroup) &&
-            this._parent instanceof abstract_form_group_directive_1.AbstractFormGroupDirective) {
-            template_driven_errors_1.TemplateDrivenErrors.formGroupNameException();
+        if (!(this._parent instanceof NgModelGroup) &&
+            this._parent instanceof AbstractFormGroupDirective) {
+            TemplateDrivenErrors.formGroupNameException();
         }
-        else if (!(this._parent instanceof ng_model_group_1.NgModelGroup) && !(this._parent instanceof ng_form_1.NgForm)) {
-            template_driven_errors_1.TemplateDrivenErrors.modelParentException();
+        else if (!(this._parent instanceof NgModelGroup) && !(this._parent instanceof NgForm)) {
+            TemplateDrivenErrors.modelParentException();
         }
@@ -127,3 +151,3 @@ };
         if (!this._isStandalone() && !this.name) {
-            template_driven_errors_1.TemplateDrivenErrors.missingNameException();
+            TemplateDrivenErrors.missingNameException();
         }
@@ -135,7 +159,19 @@ };
     };
-    /** @nocollapse */
+    NgModel.prototype._updateDisabled = function (changes) {
+        var _this = this;
+        var disabledValue = changes['isDisabled'].currentValue;
+        var isDisabled = disabledValue != null && disabledValue != false;
+        resolvedPromise.then(function () {
+            if (isDisabled && !_this.control.disabled) {
+                _this.control.disable();
+            }
+            else if (!isDisabled && _this.control.disabled) {
+                _this.control.enable();
+            }
+        });
+    };
     NgModel.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[ngModel]:not([formControlName]):not([formControl])',
-                    providers: [exports.formControlBinding],
+                    providers: [formControlBinding],
                     exportAs: 'ngModel'
@@ -146,17 +182,16 @@ },] },
     NgModel.ctorParameters = [
-        { type: control_container_1.ControlContainer, decorators: [{ type: core_1.Optional }, { type: core_1.Host },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [control_value_accessor_1.NG_VALUE_ACCESSOR,] },] },
+        { type: ControlContainer, decorators: [{ type: Optional }, { type: Host },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] },] },
     ];
-    /** @nocollapse */
     NgModel.propDecorators = {
-        'model': [{ type: core_1.Input, args: ['ngModel',] },],
-        'name': [{ type: core_1.Input },],
-        'options': [{ type: core_1.Input, args: ['ngModelOptions',] },],
-        'update': [{ type: core_1.Output, args: ['ngModelChange',] },],
+        'name': [{ type: Input },],
+        'isDisabled': [{ type: Input, args: ['disabled',] },],
+        'model': [{ type: Input, args: ['ngModel',] },],
+        'options': [{ type: Input, args: ['ngModelOptions',] },],
+        'update': [{ type: Output, args: ['ngModelChange',] },],
     };
     return NgModel;
-}(ng_control_1.NgControl));
-exports.NgModel = NgModel;
+}(NgControl));
 //# sourceMappingURL=ng_model.js.map

src/directives/ng_model.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"formControlBinding":{"provide":{"__symbolic":"reference","module":"./ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"NgModel"}},"NgModel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngModel]:not([formControlName]):not([formControl])","providers":[{"__symbolic":"reference","name":"formControlBinding"}],"exportAs":"ngModel"}]}],"members":{"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModelOptions"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","module":"./control_container","name":"ControlContainer"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_setUpControl":[{"__symbolic":"method"}],"_isStandalone":[{"__symbolic":"method"}],"_setUpStandalone":[{"__symbolic":"method"}],"_checkForErrors":[{"__symbolic":"method"}],"_checkParentType":[{"__symbolic":"method"}],"_checkName":[{"__symbolic":"method"}],"_updateValue":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"formControlBinding":{"provide":{"__symbolic":"reference","module":"./ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"NgModel"}},"NgModel":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ngModel]:not([formControlName]):not([formControl])","providers":[{"__symbolic":"reference","name":"formControlBinding"}],"exportAs":"ngModel"}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabled"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModelOptions"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","module":"./control_container","name":"ControlContainer"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":75,"character":86}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":75,"character":86}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"./control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_setUpControl":[{"__symbolic":"method"}],"_isStandalone":[{"__symbolic":"method"}],"_setUpStandalone":[{"__symbolic":"method"}],"_checkForErrors":[{"__symbolic":"method"}],"_checkParentType":[{"__symbolic":"method"}],"_checkName":[{"__symbolic":"method"}],"_updateValue":[{"__symbolic":"method"}],"_updateDisabled":[{"__symbolic":"method"}]}}}}

src/directives/normalize_validator.js

@@ -8,4 +8,3 @@ /**
  */
-"use strict";
-function normalizeValidator(validator) {
+export function normalizeValidator(validator) {
     if (validator.validate !== undefined) {
@@ -18,4 +17,3 @@ return function (c) { return validator.validate(c); };
 }
-exports.normalizeValidator = normalizeValidator;
-function normalizeAsyncValidator(validator) {
+export function normalizeAsyncValidator(validator) {
     if (validator.validate !== undefined) {
@@ -28,3 +26,2 @@ return function (c) { return validator.validate(c); };
 }
-exports.normalizeAsyncValidator = normalizeAsyncValidator;
 //# sourceMappingURL=normalize_validator.js.map

src/directives/number_value_accessor.d.ts

@@ -29,2 +29,3 @@ /**
     registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
 }

src/directives/number_value_accessor.js

@@ -8,12 +8,20 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var lang_1 = require('../facade/lang');
-var control_value_accessor_1 = require('./control_value_accessor');
-exports.NUMBER_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return NumberValueAccessor; }),
+import { Directive, ElementRef, Renderer, forwardRef } from '@angular/core';
+import { NumberWrapper, isBlank } from '../facade/lang';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+export var NUMBER_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return NumberValueAccessor; }),
     multi: true
 };
-var NumberValueAccessor = (function () {
+/**
+ * The accessor for writing a number value and listening to changes that is used by the
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  <input type="number" [(ngModel)]="age">
+ *  ```
+ */
+export var NumberValueAccessor = (function () {
     function NumberValueAccessor(_renderer, _elementRef) {
@@ -27,12 +35,14 @@ this._renderer = _renderer;
         // The value needs to be normalized for IE9, otherwise it is set to 'null' when null
-        var normalizedValue = lang_1.isBlank(value) ? '' : value;
+        var normalizedValue = isBlank(value) ? '' : value;
         this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', normalizedValue);
     };
     NumberValueAccessor.prototype.registerOnChange = function (fn) {
-        this.onChange = function (value) { fn(value == '' ? null : lang_1.NumberWrapper.parseFloat(value)); };
+        this.onChange = function (value) { fn(value == '' ? null : NumberWrapper.parseFloat(value)); };
     };
     NumberValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
-    /** @nocollapse */
+    NumberValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     NumberValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]',
@@ -44,3 +54,3 @@ host: {
                     },
-                    providers: [exports.NUMBER_VALUE_ACCESSOR]
+                    providers: [NUMBER_VALUE_ACCESSOR]
                 },] },
@@ -50,8 +60,7 @@ ];
     NumberValueAccessor.ctorParameters = [
-        { type: core_1.Renderer, },
-        { type: core_1.ElementRef, },
+        { type: Renderer, },
+        { type: ElementRef, },
     ];
     return NumberValueAccessor;
 }());
-exports.NumberValueAccessor = NumberValueAccessor;
 //# sourceMappingURL=number_value_accessor.js.map

src/directives/number_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"NUMBER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"NumberValueAccessor"},"multi":true},"NumberValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]","host":{"(change)":"onChange($event.target.value)","(input)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"NUMBER_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"NUMBER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"NumberValueAccessor"},"multi":true},"NumberValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]","host":{"(change)":"onChange($event.target.value)","(input)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"NUMBER_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}]}}}}

src/directives/radio_control_value_accessor.d.ts

@@ -56,4 +56,5 @@ /**
     registerOnTouched(fn: () => {}): void;
+    setDisabledState(isDisabled: boolean): void;
     private _checkName();
     private _throwNameError();
 }

src/directives/radio_control_value_accessor.js

@@ -8,15 +8,16 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var collection_1 = require('../facade/collection');
-var exceptions_1 = require('../facade/exceptions');
-var lang_1 = require('../facade/lang');
-var control_value_accessor_1 = require('./control_value_accessor');
-var ng_control_1 = require('./ng_control');
-exports.RADIO_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return RadioControlValueAccessor; }),
+import { Directive, ElementRef, Injectable, Injector, Input, Renderer, forwardRef } from '@angular/core';
+import { ListWrapper } from '../facade/collection';
+import { isPresent } from '../facade/lang';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+import { NgControl } from './ng_control';
+export var RADIO_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return RadioControlValueAccessor; }),
     multi: true
 };
-var RadioControlRegistry = (function () {
+/**
+ * Internal class used by Angular to uncheck radio buttons with the matching name.
+ */
+export var RadioControlRegistry = (function () {
     function RadioControlRegistry() {
@@ -35,3 +36,3 @@ this._accessors = [];
         }
-        collection_1.ListWrapper.removeAt(this._accessors, indexToRemove);
+        ListWrapper.removeAt(this._accessors, indexToRemove);
     };
@@ -49,13 +50,30 @@ RadioControlRegistry.prototype.select = function (accessor) {
             return false;
-        return controlPair[0].control.root === accessor._control.control.root &&
+        return controlPair[0]._parent === accessor._control._parent &&
             controlPair[1].name === accessor.name;
     };
-    /** @nocollapse */
     RadioControlRegistry.decorators = [
-        { type: core_1.Injectable },
+        { type: Injectable },
     ];
+    /** @nocollapse */
+    RadioControlRegistry.ctorParameters = [];
     return RadioControlRegistry;
 }());
-exports.RadioControlRegistry = RadioControlRegistry;
-var RadioControlValueAccessor = (function () {
+/**
+ * The accessor for writing a radio control value and listening to changes that is used by the
+ * {@link NgModel}, {@link FormControlDirective}, and {@link FormControlName} directives.
+ *
+ *  ### Example
+ *  ```
+ *  @Component({
+ *    template: `
+ *      <input type="radio" name="food" [(ngModel)]="food" value="chicken">
+ *      <input type="radio" name="food" [(ngModel)]="food" value="fish">
+ *    `
+ *  })
+ *  class FoodCmp {
+ *    food = 'chicken';
+ *  }
+ *  ```
+ */
+export var RadioControlValueAccessor = (function () {
     function RadioControlValueAccessor(_renderer, _elementRef, _registry, _injector) {
@@ -70,3 +88,3 @@ this._renderer = _renderer;
     RadioControlValueAccessor.prototype.ngOnInit = function () {
-        this._control = this._injector.get(ng_control_1.NgControl);
+        this._control = this._injector.get(NgControl);
         this._checkName();
@@ -78,3 +96,3 @@ this._registry.add(this._control, this);
         this._state = value === this.value;
-        if (lang_1.isPresent(value)) {
+        if (isPresent(value)) {
             this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', this._state);
@@ -93,2 +111,5 @@ }
     RadioControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
+    RadioControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     RadioControlValueAccessor.prototype._checkName = function () {
@@ -102,10 +123,9 @@ if (this.name && this.formControlName && this.name !== this.formControlName) {
     RadioControlValueAccessor.prototype._throwNameError = function () {
-        throw new exceptions_1.BaseException("\n      If you define both a name and a formControlName attribute on your radio button, their values\n      must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n    ");
+        throw new Error("\n      If you define both a name and a formControlName attribute on your radio button, their values\n      must match. Ex: <input type=\"radio\" formControlName=\"food\" name=\"food\">\n    ");
     };
-    /** @nocollapse */
     RadioControlValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]',
                     host: { '(change)': 'onChange()', '(blur)': 'onTouched()' },
-                    providers: [exports.RADIO_VALUE_ACCESSOR]
+                    providers: [RADIO_VALUE_ACCESSOR]
                 },] },
@@ -115,16 +135,14 @@ ];
     RadioControlValueAccessor.ctorParameters = [
-        { type: core_1.Renderer, },
-        { type: core_1.ElementRef, },
+        { type: Renderer, },
+        { type: ElementRef, },
         { type: RadioControlRegistry, },
-        { type: core_1.Injector, },
+        { type: Injector, },
     ];
-    /** @nocollapse */
     RadioControlValueAccessor.propDecorators = {
-        'name': [{ type: core_1.Input },],
-        'formControlName': [{ type: core_1.Input },],
-        'value': [{ type: core_1.Input },],
+        'name': [{ type: Input },],
+        'formControlName': [{ type: Input },],
+        'value': [{ type: Input },],
     };
     return RadioControlValueAccessor;
 }());
-exports.RadioControlValueAccessor = RadioControlValueAccessor;
 //# sourceMappingURL=radio_control_value_accessor.js.map

src/directives/radio_control_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"RADIO_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"RadioControlValueAccessor"},"multi":true},"RadioControlRegistry":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"_isSameGroup":[{"__symbolic":"method"}]}},"RadioControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]","host":{"(change)":"onChange()","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"RADIO_VALUE_ACCESSOR"}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","name":"RadioControlRegistry"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"fireUncheck":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_checkName":[{"__symbolic":"method"}],"_throwNameError":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"RADIO_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"RadioControlValueAccessor"},"multi":true},"RadioControlRegistry":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable"}}],"members":{"add":[{"__symbolic":"method"}],"remove":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}],"_isSameGroup":[{"__symbolic":"method"}]}},"RadioControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]","host":{"(change)":"onChange()","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"RADIO_VALUE_ACCESSOR"}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"formControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","name":"RadioControlRegistry"},{"__symbolic":"reference","module":"@angular/core","name":"Injector"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"fireUncheck":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_checkName":[{"__symbolic":"method"}],"_throwNameError":[{"__symbolic":"method"}]}}}}

src/directives/reactive_directives/form_control_directive.d.ts

@@ -13,7 +13,8 @@ /**
 import { NgControl } from '../ng_control';
-import { AsyncValidatorFn, ValidatorFn } from '../validators';
+import { AsyncValidatorFn, Validator, ValidatorFn } from '../validators';
 export declare const formControlBinding: any;
 /**
- * Binds an existing {@link FormControl} to a DOM element.
- **
+ * Binds an existing {@link FormControl} to a DOM element. It requires importing the {@link
+ * ReactiveFormsModule}.
+ *
  * In this example, we bind the control to an input element. When the value of the input element
@@ -36,3 +37,2 @@ * changes, the value of the control will reflect that change. Likewise, if the value of the
  *   `,
- *   directives: [REACTIVE_FORM_DIRECTIVES]
  * })
@@ -46,3 +46,3 @@ * export class App {
  *
- * We can also use `ngModel` to bind a domain model to the form.
+ * We can also set the value of the form programmatically with setValue().
  **
@@ -52,16 +52,18 @@ *  ```typescript
  *      selector: "login-comp",
- *      directives: [FORM_DIRECTIVES],
- *      template: "<input type='text' [formControl]='loginControl' [(ngModel)]='login'>"
+
+ *      template: "<input type='text' [formControl]='loginControl'>"
  *      })
  * class LoginComp {
  *  loginControl: FormControl = new FormControl('');
- *  login:string;
+ *
+ *  populate() {
+ *    this.loginControl.setValue('some login');
+ *  }
+ *
  * }
  *  ```
  *
- *  @experimental
+ *  @stable
  */
 export declare class FormControlDirective extends NgControl implements OnChanges {
-    private _validators;
-    private _asyncValidators;
     viewModel: any;
@@ -71,3 +73,4 @@ form: FormControl;
     update: EventEmitter<{}>;
-    constructor(_validators: any[], _asyncValidators: any[], valueAccessors: ControlValueAccessor[]);
+    isDisabled: boolean;
+    constructor(validators: Array<Validator | ValidatorFn>, asyncValidators: Array<Validator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -74,0 +77,0 @@ path: string[];

src/directives/reactive_directives/form_control_directive.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,28 +14,85 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var async_1 = require('../../facade/async');
-var collection_1 = require('../../facade/collection');
-var validators_1 = require('../../validators');
-var control_value_accessor_1 = require('../control_value_accessor');
-var ng_control_1 = require('../ng_control');
-var shared_1 = require('../shared');
-exports.formControlBinding = {
-    provide: ng_control_1.NgControl,
-    useExisting: core_1.forwardRef(function () { return FormControlDirective; })
+import { Directive, Inject, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { EventEmitter } from '../../facade/async';
+import { StringMapWrapper } from '../../facade/collection';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../../validators';
+import { NG_VALUE_ACCESSOR } from '../control_value_accessor';
+import { NgControl } from '../ng_control';
+import { ReactiveErrors } from '../reactive_errors';
+import { composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl } from '../shared';
+export var formControlBinding = {
+    provide: NgControl,
+    useExisting: forwardRef(function () { return FormControlDirective; })
 };
-var FormControlDirective = (function (_super) {
+/**
+ * Binds an existing {@link FormControl} to a DOM element. It requires importing the {@link
+ * ReactiveFormsModule}.
+ *
+ * In this example, we bind the control to an input element. When the value of the input element
+ * changes, the value of the control will reflect that change. Likewise, if the value of the
+ * control changes, the input element reflects that change.
+ *
+ *  ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <h2>Bind existing control example</h2>
+ *       <form>
+ *         <p>Element with existing control: <input type="text"
+ * [formControl]="loginControl"></p>
+ *         <p>Value of existing control: {{loginControl.value}}</p>
+ *       </form>
+ *     </div>
+ *   `,
+ * })
+ * export class App {
+ *   loginControl: FormControl = new FormControl('');
+ * }
+ *  ```
+ *
+ * ### ngModel
+ *
+ * We can also set the value of the form programmatically with setValue().
+ **
+ *  ```typescript
+ * @Component({
+ *      selector: "login-comp",
+
+ *      template: "<input type='text' [formControl]='loginControl'>"
+ *      })
+ * class LoginComp {
+ *  loginControl: FormControl = new FormControl('');
+ *
+ *  populate() {
+ *    this.loginControl.setValue('some login');
+ *  }
+ *
+ * }
+ *  ```
+ *
+ *  @stable
+ */
+export var FormControlDirective = (function (_super) {
     __extends(FormControlDirective, _super);
-    function FormControlDirective(_validators, _asyncValidators, valueAccessors) {
+    function FormControlDirective(validators, asyncValidators, valueAccessors) {
         _super.call(this);
-        this._validators = _validators;
-        this._asyncValidators = _asyncValidators;
-        this.update = new async_1.EventEmitter();
-        this.valueAccessor = shared_1.selectValueAccessor(this, valueAccessors);
+        this.update = new EventEmitter();
+        this._rawValidators = validators || [];
+        this._rawAsyncValidators = asyncValidators || [];
+        this.valueAccessor = selectValueAccessor(this, valueAccessors);
     }
+    Object.defineProperty(FormControlDirective.prototype, "isDisabled", {
+        set: function (isDisabled) { ReactiveErrors.disabledAttrWarning(); },
+        enumerable: true,
+        configurable: true
+    });
     FormControlDirective.prototype.ngOnChanges = function (changes) {
         if (this._isControlChanged(changes)) {
-            shared_1.setUpControl(this.form, this);
+            setUpControl(this.form, this);
+            if (this.control.disabled)
+                this.valueAccessor.setDisabledState(true);
             this.form.updateValueAndValidity({ emitEvent: false });
         }
-        if (shared_1.isPropertyUpdated(changes, this.viewModel)) {
+        if (isPropertyUpdated(changes, this.viewModel)) {
             this.form.setValue(this.model);
@@ -52,3 +108,3 @@ this.viewModel = this.model;
     Object.defineProperty(FormControlDirective.prototype, "validator", {
-        get: function () { return shared_1.composeValidators(this._validators); },
+        get: function () { return composeValidators(this._rawValidators); },
         enumerable: true,
@@ -59,3 +115,3 @@ configurable: true
         get: function () {
-            return shared_1.composeAsyncValidators(this._asyncValidators);
+            return composeAsyncValidators(this._rawAsyncValidators);
         },
@@ -75,23 +131,21 @@ enumerable: true,
     FormControlDirective.prototype._isControlChanged = function (changes) {
-        return collection_1.StringMapWrapper.contains(changes, 'form');
+        return StringMapWrapper.contains(changes, 'form');
     };
-    /** @nocollapse */
     FormControlDirective.decorators = [
-        { type: core_1.Directive, args: [{ selector: '[formControl]', providers: [exports.formControlBinding], exportAs: 'ngForm' },] },
+        { type: Directive, args: [{ selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm' },] },
     ];
     /** @nocollapse */
     FormControlDirective.ctorParameters = [
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [control_value_accessor_1.NG_VALUE_ACCESSOR,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] },] },
     ];
-    /** @nocollapse */
     FormControlDirective.propDecorators = {
-        'form': [{ type: core_1.Input, args: ['formControl',] },],
-        'model': [{ type: core_1.Input, args: ['ngModel',] },],
-        'update': [{ type: core_1.Output, args: ['ngModelChange',] },],
+        'form': [{ type: Input, args: ['formControl',] },],
+        'model': [{ type: Input, args: ['ngModel',] },],
+        'update': [{ type: Output, args: ['ngModelChange',] },],
+        'isDisabled': [{ type: Input, args: ['disabled',] },],
     };
     return FormControlDirective;
-}(ng_control_1.NgControl));
-exports.FormControlDirective = FormControlDirective;
+}(NgControl));
 //# sourceMappingURL=form_control_directive.js.map

src/directives/reactive_directives/form_control_directive.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"formControlBinding":{"provide":{"__symbolic":"reference","module":"../ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"FormControlDirective"}},"FormControlDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControl]","providers":[{"__symbolic":"reference","name":"formControlBinding"}],"exportAs":"ngForm"}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formControl"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_isControlChanged":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"formControlBinding":{"provide":{"__symbolic":"reference","module":"../ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"FormControlDirective"}},"FormControlDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControl]","providers":[{"__symbolic":"reference","name":"formControlBinding"}],"exportAs":"ngForm"}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formControl"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabled"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":87,"character":86}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":87,"character":86}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_isControlChanged":[{"__symbolic":"method"}]}}}}

src/directives/reactive_directives/form_control_name.d.ts

@@ -14,3 +14,3 @@ /**
 import { NgControl } from '../ng_control';
-import { AsyncValidatorFn, ValidatorFn } from '../validators';
+import { AsyncValidatorFn, Validator, ValidatorFn } from '../validators';
 export declare const controlNameBinding: any;
@@ -20,3 +20,4 @@ /**
  *
- * This directive can only be used as a child of {@link FormGroupDirective}.
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
 
@@ -32,3 +33,2 @@ * ### Example
  *      selector: "login-comp",
- *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
@@ -43,4 +43,4 @@ *        <form [formGroup]="myForm" (submit)="onLogIn()">
  * class LoginComp {
- *  loginCtrl = new Control();
- *  passwordCtrl = new Control();
+ *  loginCtrl = new FormControl();
+ *  passwordCtrl = new FormControl();
  *  myForm = new FormGroup({
@@ -56,5 +56,3 @@ *     login: loginCtrl,
  *
- * TODO(kara): Remove ngModel example with reactive paradigm
- * We can also use ngModel to bind a domain model to the form, if you don't want to provide
- * individual init values to each control.
+ * We can also set the value of the form programmatically using setValue().
  *
@@ -64,8 +62,6 @@ *  ```
  *      selector: "login-comp",
- *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
  *        <form [formGroup]="myForm" (submit)='onLogIn()'>
- *          Login <input type='text' formControlName='login' [(ngModel)]="credentials.login">
- *          Password <input type='password' formControlName='password'
- *                          [(ngModel)]="credentials.password">
+ *          Login <input type='text' formControlName='login'>
+ *          Password <input type='password' formControlName='password'>
  *          <button type='submit'>Log in!</button>
@@ -75,8 +71,11 @@ *        </form>
  * class LoginComp {
- *  credentials: {login:string, password:string};
  *  myForm = new FormGroup({
- *    login: new Control(this.credentials.login),
- *    password: new Control(this.credentials.password)
+ *    login: new FormControl(),
+ *    password: new FormControl()
  *  });
  *
+ *  populate() {
+ *     this.myForm.setValue({login: 'some login', password: 'some password'});
+ *  }
+ *
  *  onLogIn(): void {
@@ -89,8 +88,5 @@ *    // this.credentials.login === "some login"
  *
- *  @experimental
+ *  @stable
  */
 export declare class FormControlName extends NgControl implements OnChanges, OnDestroy {
-    private _parent;
-    private _validators;
-    private _asyncValidators;
     private _added;
@@ -100,3 +96,4 @@ name: string;
     update: EventEmitter<{}>;
-    constructor(_parent: ControlContainer, _validators: any[], _asyncValidators: any[], valueAccessors: ControlValueAccessor[]);
+    isDisabled: boolean;
+    constructor(parent: ControlContainer, validators: Array<Validator | ValidatorFn>, asyncValidators: Array<Validator | AsyncValidatorFn>, valueAccessors: ControlValueAccessor[]);
     ngOnChanges(changes: SimpleChanges): void;
@@ -103,0 +100,0 @@ ngOnDestroy(): void;

src/directives/reactive_directives/form_control_name.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,28 +14,100 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var async_1 = require('../../facade/async');
-var validators_1 = require('../../validators');
-var abstract_form_group_directive_1 = require('../abstract_form_group_directive');
-var control_container_1 = require('../control_container');
-var control_value_accessor_1 = require('../control_value_accessor');
-var ng_control_1 = require('../ng_control');
-var reactive_errors_1 = require('../reactive_errors');
-var shared_1 = require('../shared');
-var form_group_directive_1 = require('./form_group_directive');
-var form_group_name_1 = require('./form_group_name');
-exports.controlNameBinding = {
-    provide: ng_control_1.NgControl,
-    useExisting: core_1.forwardRef(function () { return FormControlName; })
+import { Directive, Host, Inject, Input, Optional, Output, Self, SkipSelf, forwardRef } from '@angular/core';
+import { EventEmitter } from '../../facade/async';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../../validators';
+import { AbstractFormGroupDirective } from '../abstract_form_group_directive';
+import { ControlContainer } from '../control_container';
+import { NG_VALUE_ACCESSOR } from '../control_value_accessor';
+import { NgControl } from '../ng_control';
+import { ReactiveErrors } from '../reactive_errors';
+import { composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor } from '../shared';
+import { FormGroupDirective } from './form_group_directive';
+import { FormArrayName, FormGroupName } from './form_group_name';
+export var controlNameBinding = {
+    provide: NgControl,
+    useExisting: forwardRef(function () { return FormControlName; })
 };
-var FormControlName = (function (_super) {
+/**
+ * Syncs an existing form control with the specified name to a DOM element.
+ *
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
+
+ * ### Example
+ *
+ * In this example, we create the login and password controls.
+ * We can work with each control separately: check its validity, get its value, listen to its
+ * changes.
+ *
+ *  ```
+ * @Component({
+ *      selector: "login-comp",
+ *      template: `
+ *        <form [formGroup]="myForm" (submit)="onLogIn()">
+ *          Login <input type="text" formControlName="login">
+ *          <div *ngIf="!loginCtrl.valid">Login is invalid</div>
+ *          Password <input type="password" formControlName="password">
+ *          <button type="submit">Log in!</button>
+ *        </form>
+ *      `})
+ * class LoginComp {
+ *  loginCtrl = new FormControl();
+ *  passwordCtrl = new FormControl();
+ *  myForm = new FormGroup({
+ *     login: loginCtrl,
+ *     password: passwordCtrl
+ *  });
+ *  onLogIn(): void {
+ *    // value === {login: 'some login', password: 'some password'}
+ *  }
+ * }
+ *  ```
+ *
+ * We can also set the value of the form programmatically using setValue().
+ *
+ *  ```
+ * @Component({
+ *      selector: "login-comp",
+ *      template: `
+ *        <form [formGroup]="myForm" (submit)='onLogIn()'>
+ *          Login <input type='text' formControlName='login'>
+ *          Password <input type='password' formControlName='password'>
+ *          <button type='submit'>Log in!</button>
+ *        </form>
+ *      `})
+ * class LoginComp {
+ *  myForm = new FormGroup({
+ *    login: new FormControl(),
+ *    password: new FormControl()
+ *  });
+ *
+ *  populate() {
+ *     this.myForm.setValue({login: 'some login', password: 'some password'});
+ *  }
+ *
+ *  onLogIn(): void {
+ *    // this.credentials.login === "some login"
+ *    // this.credentials.password === "some password"
+ *  }
+ * }
+ *  ```
+ *
+ *  @stable
+ */
+export var FormControlName = (function (_super) {
     __extends(FormControlName, _super);
-    function FormControlName(_parent, _validators, _asyncValidators, valueAccessors) {
+    function FormControlName(parent, validators, asyncValidators, valueAccessors) {
         _super.call(this);
-        this._parent = _parent;
-        this._validators = _validators;
-        this._asyncValidators = _asyncValidators;
         this._added = false;
-        this.update = new async_1.EventEmitter();
-        this.valueAccessor = shared_1.selectValueAccessor(this, valueAccessors);
+        this.update = new EventEmitter();
+        this._parent = parent;
+        this._rawValidators = validators || [];
+        this._rawAsyncValidators = asyncValidators || [];
+        this.valueAccessor = selectValueAccessor(this, valueAccessors);
     }
+    Object.defineProperty(FormControlName.prototype, "isDisabled", {
+        set: function (isDisabled) { ReactiveErrors.disabledAttrWarning(); },
+        enumerable: true,
+        configurable: true
+    });
     FormControlName.prototype.ngOnChanges = function (changes) {
@@ -46,5 +117,7 @@ if (!this._added) {
             this.formDirective.addControl(this);
+            if (this.control.disabled)
+                this.valueAccessor.setDisabledState(true);
             this._added = true;
         }
-        if (shared_1.isPropertyUpdated(changes, this.viewModel)) {
+        if (isPropertyUpdated(changes, this.viewModel)) {
             this.viewModel = this.model;
@@ -54,3 +127,7 @@ this.formDirective.updateModel(this, this.model);
     };
-    FormControlName.prototype.ngOnDestroy = function () { this.formDirective.removeControl(this); };
+    FormControlName.prototype.ngOnDestroy = function () {
+        if (this.formDirective) {
+            this.formDirective.removeControl(this);
+        }
+    };
     FormControlName.prototype.viewToModelUpdate = function (newValue) {
@@ -61,3 +138,3 @@ this.viewModel = newValue;
     Object.defineProperty(FormControlName.prototype, "path", {
-        get: function () { return shared_1.controlPath(this.name, this._parent); },
+        get: function () { return controlPath(this.name, this._parent); },
         enumerable: true,
@@ -67,3 +144,3 @@ configurable: true
     Object.defineProperty(FormControlName.prototype, "formDirective", {
-        get: function () { return this._parent.formDirective; },
+        get: function () { return this._parent ? this._parent.formDirective : null; },
         enumerable: true,
@@ -73,3 +150,3 @@ configurable: true
     Object.defineProperty(FormControlName.prototype, "validator", {
-        get: function () { return shared_1.composeValidators(this._validators); },
+        get: function () { return composeValidators(this._rawValidators); },
         enumerable: true,
@@ -80,3 +157,3 @@ configurable: true
         get: function () {
-            return shared_1.composeAsyncValidators(this._asyncValidators);
+            return composeAsyncValidators(this._rawAsyncValidators);
         },
@@ -92,32 +169,29 @@ enumerable: true,
     FormControlName.prototype._checkParentType = function () {
-        if (!(this._parent instanceof form_group_name_1.FormGroupName) &&
-            this._parent instanceof abstract_form_group_directive_1.AbstractFormGroupDirective) {
-            reactive_errors_1.ReactiveErrors.ngModelGroupException();
+        if (!(this._parent instanceof FormGroupName) &&
+            this._parent instanceof AbstractFormGroupDirective) {
+            ReactiveErrors.ngModelGroupException();
         }
-        else if (!(this._parent instanceof form_group_name_1.FormGroupName) &&
-            !(this._parent instanceof form_group_directive_1.FormGroupDirective) &&
-            !(this._parent instanceof form_group_name_1.FormArrayName)) {
-            reactive_errors_1.ReactiveErrors.controlParentException();
+        else if (!(this._parent instanceof FormGroupName) && !(this._parent instanceof FormGroupDirective) &&
+            !(this._parent instanceof FormArrayName)) {
+            ReactiveErrors.controlParentException();
         }
     };
-    /** @nocollapse */
     FormControlName.decorators = [
-        { type: core_1.Directive, args: [{ selector: '[formControlName]', providers: [exports.controlNameBinding] },] },
+        { type: Directive, args: [{ selector: '[formControlName]', providers: [controlNameBinding] },] },
     ];
     /** @nocollapse */
     FormControlName.ctorParameters = [
-        { type: control_container_1.ControlContainer, decorators: [{ type: core_1.Optional }, { type: core_1.Host }, { type: core_1.SkipSelf },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [control_value_accessor_1.NG_VALUE_ACCESSOR,] },] },
+        { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALUE_ACCESSOR,] },] },
     ];
-    /** @nocollapse */
     FormControlName.propDecorators = {
-        'name': [{ type: core_1.Input, args: ['formControlName',] },],
-        'model': [{ type: core_1.Input, args: ['ngModel',] },],
-        'update': [{ type: core_1.Output, args: ['ngModelChange',] },],
+        'name': [{ type: Input, args: ['formControlName',] },],
+        'model': [{ type: Input, args: ['ngModel',] },],
+        'update': [{ type: Output, args: ['ngModelChange',] },],
+        'isDisabled': [{ type: Input, args: ['disabled',] },],
     };
     return FormControlName;
-}(ng_control_1.NgControl));
-exports.FormControlName = FormControlName;
+}(NgControl));
 //# sourceMappingURL=form_control_name.js.map

src/directives/reactive_directives/form_control_name.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"controlNameBinding":{"provide":{"__symbolic":"reference","module":"../ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"FormControlName"}},"FormControlName":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControlName]","providers":[{"__symbolic":"reference","name":"controlNameBinding"}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formControlName"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","module":"../control_container","name":"ControlContainer"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_checkParentType":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"controlNameBinding":{"provide":{"__symbolic":"reference","module":"../ng_control","name":"NgControl"},"useExisting":{"__symbolic":"reference","name":"FormControlName"}},"FormControlName":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formControlName]","providers":[{"__symbolic":"reference","name":"controlNameBinding"}]}]}],"members":{"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formControlName"]}]}],"model":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngModel"]}]}],"update":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["ngModelChange"]}]}],"isDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["disabled"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf"}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"NG_VALUE_ACCESSOR"}]}]],"parameters":[{"__symbolic":"reference","module":"../control_container","name":"ControlContainer"},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":114,"character":16}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"error","message":"Expression form not supported","line":114,"character":16}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","module":"../control_value_accessor","name":"ControlValueAccessor"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"viewToModelUpdate":[{"__symbolic":"method"}],"_checkParentType":[{"__symbolic":"method"}]}}}}

src/directives/reactive_directives/form_group_directive.d.ts

@@ -17,6 +17,5 @@ /**
 /**
- * Binds an existing form group to a DOM element.
+ * Binds an existing form group to a DOM element.  It requires importing the {@link
+ * ReactiveFormsModule}.
  *
- * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
- *
  * In this example, we bind the form group to the form element, and we bind the login and
@@ -36,6 +35,5 @@ * password controls to the login and password elements.
  *       <p>Value:</p>
- *       <pre>{{value}}</pre>
+ *       <pre>{{ loginForm.value | json}}</pre>
  *     </div>
- *   `,
- *   directives: [REACTIVE_FORM_DIRECTIVES]
+ *   `
  * })
@@ -52,9 +50,6 @@ * export class App {
  *
- *   get value(): string {
- *     return JSON.stringify(this.loginForm.value, null, 2);
- *   }
  * }
  *  ```
  *
- * We can also use ngModel to bind a domain model to the form.
+ * We can also use setValue() to populate the form programmatically.
  *
@@ -64,8 +59,6 @@ *  ```typescript
  *      selector: "login-comp",
- *      directives: [REACTIVE_FORM_DIRECTIVES],
  *      template: `
  *        <form [formGroup]='loginForm'>
- *          Login <input type='text' formControlName='login' [(ngModel)]='credentials.login'>
- *          Password <input type='password' formControlName='password'
- *                          [(ngModel)]='credentials.password'>
+ *          Login <input type='text' formControlName='login'>
+ *          Password <input type='password' formControlName='password'>
  *          <button (click)="onLogin()">Login</button>
@@ -75,3 +68,2 @@ *        </form>`
  * class LoginComp {
- *  credentials: {login: string, password: string};
  *  loginForm: FormGroup;
@@ -81,7 +73,11 @@ *
  *    this.loginForm = new FormGroup({
- *      login: new FormControl(""),
- *      password: new FormControl("")
+ *      login: new FormControl(''),
+ *      password: new FormControl('')
  *    });
  *  }
  *
+ *  populate() {
+ *    this.loginForm.setValue({ login: 'some login', password: 'some password'});
+ *  }
+ *
  *  onLogin(): void {
@@ -94,3 +90,3 @@ *    // this.credentials.login === 'some login'
  *
- *  @experimental
+ *  @stable
  */
@@ -122,3 +118,4 @@ export declare class FormGroupDirective extends ControlContainer implements Form, OnChanges {
     onReset(): void;
+    resetForm(value?: any): void;
     private _checkFormPresent();
 }

src/directives/reactive_directives/form_group_directive.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,15 +14,85 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var async_1 = require('../../facade/async');
-var collection_1 = require('../../facade/collection');
-var lang_1 = require('../../facade/lang');
-var validators_1 = require('../../validators');
-var control_container_1 = require('../control_container');
-var reactive_errors_1 = require('../reactive_errors');
-var shared_1 = require('../shared');
-exports.formDirectiveProvider = {
-    provide: control_container_1.ControlContainer,
-    useExisting: core_1.forwardRef(function () { return FormGroupDirective; })
+import { Directive, Inject, Input, Optional, Output, Self, forwardRef } from '@angular/core';
+import { EventEmitter } from '../../facade/async';
+import { ListWrapper, StringMapWrapper } from '../../facade/collection';
+import { isBlank } from '../../facade/lang';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators } from '../../validators';
+import { ControlContainer } from '../control_container';
+import { ReactiveErrors } from '../reactive_errors';
+import { cleanUpControl, composeAsyncValidators, composeValidators, setUpControl, setUpFormContainer } from '../shared';
+export var formDirectiveProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(function () { return FormGroupDirective; })
 };
-var FormGroupDirective = (function (_super) {
+/**
+ * Binds an existing form group to a DOM element.  It requires importing the {@link
+ * ReactiveFormsModule}.
+ *
+ * In this example, we bind the form group to the form element, and we bind the login and
+ * password controls to the login and password elements.
+ *
+ *  ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <h2>Binding an existing form group</h2>
+ *       <form [formGroup]="loginForm">
+ *         <p>Login: <input type="text" formControlName="login"></p>
+ *         <p>Password: <input type="password" formControlName="password"></p>
+ *       </form>
+ *       <p>Value:</p>
+ *       <pre>{{ loginForm.value | json}}</pre>
+ *     </div>
+ *   `
+ * })
+ * export class App {
+ *   loginForm: FormGroup;
+ *
+ *   constructor() {
+ *     this.loginForm = new FormGroup({
+ *       login: new FormControl(""),
+ *       password: new FormControl("")
+ *     });
+ *   }
+ *
+ * }
+ *  ```
+ *
+ * We can also use setValue() to populate the form programmatically.
+ *
+ *  ```typescript
+ * @Component({
+ *      selector: "login-comp",
+ *      template: `
+ *        <form [formGroup]='loginForm'>
+ *          Login <input type='text' formControlName='login'>
+ *          Password <input type='password' formControlName='password'>
+ *          <button (click)="onLogin()">Login</button>
+ *        </form>`
+ *      })
+ * class LoginComp {
+ *  loginForm: FormGroup;
+ *
+ *  constructor() {
+ *    this.loginForm = new FormGroup({
+ *      login: new FormControl(''),
+ *      password: new FormControl('')
+ *    });
+ *  }
+ *
+ *  populate() {
+ *    this.loginForm.setValue({ login: 'some login', password: 'some password'});
+ *  }
+ *
+ *  onLogin(): void {
+ *    // this.credentials.login === 'some login'
+ *    // this.credentials.password === 'some password'
+ *  }
+ * }
+ *  ```
+ *
+ *  @stable
+ */
+export var FormGroupDirective = (function (_super) {
     __extends(FormGroupDirective, _super);
@@ -37,14 +106,13 @@ function FormGroupDirective(_validators, _asyncValidators) {
         this.form = null;
-        this.ngSubmit = new async_1.EventEmitter();
+        this.ngSubmit = new EventEmitter();
     }
     FormGroupDirective.prototype.ngOnChanges = function (changes) {
         this._checkFormPresent();
-        if (collection_1.StringMapWrapper.contains(changes, 'form')) {
-            var sync = shared_1.composeValidators(this._validators);
-            this.form.validator = validators_1.Validators.compose([this.form.validator, sync]);
-            var async = shared_1.composeAsyncValidators(this._asyncValidators);
-            this.form.asyncValidator = validators_1.Validators.composeAsync([this.form.asyncValidator, async]);
-            this.form.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+        if (StringMapWrapper.contains(changes, 'form')) {
+            var sync = composeValidators(this._validators);
+            this.form.validator = Validators.compose([this.form.validator, sync]);
+            var async = composeAsyncValidators(this._asyncValidators);
+            this.form.asyncValidator = Validators.composeAsync([this.form.asyncValidator, async]);
+            this._updateDomValue(changes);
         }
-        this._updateDomValue();
     };
@@ -73,3 +141,3 @@ Object.defineProperty(FormGroupDirective.prototype, "submitted", {
         var ctrl = this.form.get(dir.path);
-        shared_1.setUpControl(ctrl, dir);
+        setUpControl(ctrl, dir);
         ctrl.updateValueAndValidity({ emitEvent: false });
@@ -79,6 +147,6 @@ this.directives.push(dir);
     FormGroupDirective.prototype.getControl = function (dir) { return this.form.get(dir.path); };
-    FormGroupDirective.prototype.removeControl = function (dir) { collection_1.ListWrapper.remove(this.directives, dir); };
+    FormGroupDirective.prototype.removeControl = function (dir) { ListWrapper.remove(this.directives, dir); };
     FormGroupDirective.prototype.addFormGroup = function (dir) {
         var ctrl = this.form.get(dir.path);
-        shared_1.setUpFormContainer(ctrl, dir);
+        setUpFormContainer(ctrl, dir);
         ctrl.updateValueAndValidity({ emitEvent: false });
@@ -90,3 +158,3 @@ };
         var ctrl = this.form.get(dir.path);
-        shared_1.setUpFormContainer(ctrl, dir);
+        setUpFormContainer(ctrl, dir);
         ctrl.updateValueAndValidity({ emitEvent: false });
@@ -105,21 +173,32 @@ };
     };
-    FormGroupDirective.prototype.onReset = function () { this.form.reset(); };
+    FormGroupDirective.prototype.onReset = function () { this.resetForm(); };
+    FormGroupDirective.prototype.resetForm = function (value) {
+        if (value === void 0) { value = undefined; }
+        this.form.reset(value);
+        this._submitted = false;
+    };
     /** @internal */
-    FormGroupDirective.prototype._updateDomValue = function () {
+    FormGroupDirective.prototype._updateDomValue = function (changes) {
         var _this = this;
+        var oldForm = changes['form'].previousValue;
         this.directives.forEach(function (dir) {
-            var ctrl = _this.form.get(dir.path);
-            dir.valueAccessor.writeValue(ctrl.value);
+            var newCtrl = _this.form.get(dir.path);
+            var oldCtrl = oldForm.get(dir.path);
+            if (oldCtrl !== newCtrl) {
+                cleanUpControl(oldCtrl, dir);
+                if (newCtrl)
+                    setUpControl(newCtrl, dir);
+            }
         });
+        this.form._updateTreeValidity({ emitEvent: false });
     };
     FormGroupDirective.prototype._checkFormPresent = function () {
-        if (lang_1.isBlank(this.form)) {
-            reactive_errors_1.ReactiveErrors.missingFormException();
+        if (isBlank(this.form)) {
+            ReactiveErrors.missingFormException();
         }
     };
-    /** @nocollapse */
     FormGroupDirective.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[formGroup]',
-                    providers: [exports.formDirectiveProvider],
+                    providers: [formDirectiveProvider],
                     host: { '(submit)': 'onSubmit()', '(reset)': 'onReset()' },
@@ -131,13 +210,11 @@ exportAs: 'ngForm'
     FormGroupDirective.ctorParameters = [
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
     ];
-    /** @nocollapse */
     FormGroupDirective.propDecorators = {
-        'form': [{ type: core_1.Input, args: ['formGroup',] },],
-        'ngSubmit': [{ type: core_1.Output },],
+        'form': [{ type: Input, args: ['formGroup',] },],
+        'ngSubmit': [{ type: Output },],
     };
     return FormGroupDirective;
-}(control_container_1.ControlContainer));
-exports.FormGroupDirective = FormGroupDirective;
+}(ControlContainer));
 //# sourceMappingURL=form_group_directive.js.map

src/directives/reactive_directives/form_group_directive.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"formDirectiveProvider":{"provide":{"__symbolic":"reference","module":"../control_container","name":"ControlContainer"},"useExisting":{"__symbolic":"reference","name":"FormGroupDirective"}},"FormGroupDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formGroup]","providers":[{"__symbolic":"reference","name":"formDirectiveProvider"}],"host":{"(submit)":"onSubmit()","(reset)":"onReset()"},"exportAs":"ngForm"}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formGroup"]}]}],"ngSubmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"addControl":[{"__symbolic":"method"}],"getControl":[{"__symbolic":"method"}],"removeControl":[{"__symbolic":"method"}],"addFormGroup":[{"__symbolic":"method"}],"removeFormGroup":[{"__symbolic":"method"}],"getFormGroup":[{"__symbolic":"method"}],"addFormArray":[{"__symbolic":"method"}],"removeFormArray":[{"__symbolic":"method"}],"getFormArray":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"_updateDomValue":[{"__symbolic":"method"}],"_checkFormPresent":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"formDirectiveProvider":{"provide":{"__symbolic":"reference","module":"../control_container","name":"ControlContainer"},"useExisting":{"__symbolic":"reference","name":"FormGroupDirective"}},"FormGroupDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[formGroup]","providers":[{"__symbolic":"reference","name":"formDirectiveProvider"}],"host":{"(submit)":"onSubmit()","(reset)":"onReset()"},"exportAs":"ngForm"}]}],"members":{"form":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["formGroup"]}]}],"ngSubmit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_VALIDATORS"}]}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Self"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject"},"arguments":[{"__symbolic":"reference","module":"../../validators","name":"NG_ASYNC_VALIDATORS"}]}]],"parameters":[{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]},{"__symbolic":"reference","name":"Array","arguments":[{"__symbolic":"reference","name":"any"}]}]}],"ngOnChanges":[{"__symbolic":"method"}],"addControl":[{"__symbolic":"method"}],"getControl":[{"__symbolic":"method"}],"removeControl":[{"__symbolic":"method"}],"addFormGroup":[{"__symbolic":"method"}],"removeFormGroup":[{"__symbolic":"method"}],"getFormGroup":[{"__symbolic":"method"}],"addFormArray":[{"__symbolic":"method"}],"removeFormArray":[{"__symbolic":"method"}],"getFormArray":[{"__symbolic":"method"}],"updateModel":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}],"onReset":[{"__symbolic":"method"}],"resetForm":[{"__symbolic":"method"}],"_updateDomValue":[{"__symbolic":"method"}],"_checkFormPresent":[{"__symbolic":"method"}]}}}}

src/directives/reactive_directives/form_group_name.d.ts

@@ -18,3 +18,4 @@ /**
  *
- * This directive can only be used as a child of {@link FormGroupDirective}.
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
  *
@@ -35,4 +36,4 @@ * ```typescript
  *         <h3>Name value:</h3>
- *         <pre>{{ nameGroup | json }}</pre>
- *         <p>Name is {{nameGroup?.valid ? "valid" : "invalid"}}</p>
+ *         <pre>{{ myForm.get('name') | json }}</pre>
+ *         <p>Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}</p>
  *         <h3>What's your favorite food?</h3>
@@ -47,10 +48,8 @@ *         <p><input formControlName="food"></p>
  * export class App {
- *   nameGroup = new FormGroup({
+ *   myForm = new FormGroup({
+ *     name: new FormGroup({
  *       first: new FormControl('', Validators.required),
  *       middle: new FormControl(''),
  *       last: new FormControl('', Validators.required)
- *   });
- *
- *   myForm = new FormGroup({
- *     name: this.nameGroup,
+ *     }),
  *     food: new FormControl()
@@ -64,3 +63,3 @@ *   });
  *
- * @experimental
+ * @stable
  */
@@ -75,3 +74,4 @@ export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
  *
- * This directive can only be used as a child of {@link FormGroupDirective}.
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
  *
@@ -106,3 +106,3 @@ * ```typescript
  *
- * @experimental
+ * @stable
  */
@@ -109,0 +109,0 @@ export declare class FormArrayName extends ControlContainer implements OnInit, OnDestroy {

src/directives/reactive_directives/form_group_name.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,14 +14,61 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var core_1 = require('@angular/core');
-var validators_1 = require('../../validators');
-var abstract_form_group_directive_1 = require('../abstract_form_group_directive');
-var control_container_1 = require('../control_container');
-var reactive_errors_1 = require('../reactive_errors');
-var shared_1 = require('../shared');
-var form_group_directive_1 = require('./form_group_directive');
-exports.formGroupNameProvider = {
-    provide: control_container_1.ControlContainer,
-    useExisting: core_1.forwardRef(function () { return FormGroupName; })
+import { Directive, Host, Inject, Input, Optional, Self, SkipSelf, forwardRef } from '@angular/core';
+import { NG_ASYNC_VALIDATORS, NG_VALIDATORS } from '../../validators';
+import { AbstractFormGroupDirective } from '../abstract_form_group_directive';
+import { ControlContainer } from '../control_container';
+import { ReactiveErrors } from '../reactive_errors';
+import { composeAsyncValidators, composeValidators, controlPath } from '../shared';
+import { FormGroupDirective } from './form_group_directive';
+export var formGroupNameProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(function () { return FormGroupName; })
 };
-var FormGroupName = (function (_super) {
+/**
+ * Syncs an existing form group to a DOM element.
+ *
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <h2>Angular FormGroup Example</h2>
+ *       <form [formGroup]="myForm">
+ *         <div formGroupName="name">
+ *           <h3>Enter your name:</h3>
+ *           <p>First: <input formControlName="first"></p>
+ *           <p>Middle: <input formControlName="middle"></p>
+ *           <p>Last: <input formControlName="last"></p>
+ *         </div>
+ *         <h3>Name value:</h3>
+ *         <pre>{{ myForm.get('name') | json }}</pre>
+ *         <p>Name is {{myForm.get('name')?.valid ? "valid" : "invalid"}}</p>
+ *         <h3>What's your favorite food?</h3>
+ *         <p><input formControlName="food"></p>
+ *         <h3>Form value</h3>
+ *         <pre> {{ myForm | json }} </pre>
+ *       </form>
+ *     </div>
+ *   `
+ * })
+ * export class App {
+ *   myForm = new FormGroup({
+ *     name: new FormGroup({
+ *       first: new FormControl('', Validators.required),
+ *       middle: new FormControl(''),
+ *       last: new FormControl('', Validators.required)
+ *     }),
+ *     food: new FormControl()
+ *   });
+ * }
+ * ```
+ *
+ * This example syncs the form group for the user's name. The value and validation state of
+ * this group can be accessed separately from the overall form.
+ *
+ * @stable
+ */
+export var FormGroupName = (function (_super) {
     __extends(FormGroupName, _super);
@@ -38,27 +84,60 @@ function FormGroupName(parent, validators, asyncValidators) {
         if (_hasInvalidParent(this._parent)) {
-            reactive_errors_1.ReactiveErrors.groupParentException();
+            ReactiveErrors.groupParentException();
         }
     };
-    /** @nocollapse */
     FormGroupName.decorators = [
-        { type: core_1.Directive, args: [{ selector: '[formGroupName]', providers: [exports.formGroupNameProvider] },] },
+        { type: Directive, args: [{ selector: '[formGroupName]', providers: [formGroupNameProvider] },] },
     ];
     /** @nocollapse */
     FormGroupName.ctorParameters = [
-        { type: control_container_1.ControlContainer, decorators: [{ type: core_1.Optional }, { type: core_1.Host }, { type: core_1.SkipSelf },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
+        { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
     ];
-    /** @nocollapse */
     FormGroupName.propDecorators = {
-        'name': [{ type: core_1.Input, args: ['formGroupName',] },],
+        'name': [{ type: Input, args: ['formGroupName',] },],
     };
     return FormGroupName;
-}(abstract_form_group_directive_1.AbstractFormGroupDirective));
-exports.FormGroupName = FormGroupName;
-exports.formArrayNameProvider = {
-    provide: control_container_1.ControlContainer,
-    useExisting: core_1.forwardRef(function () { return FormArrayName; })
+}(AbstractFormGroupDirective));
+export var formArrayNameProvider = {
+    provide: ControlContainer,
+    useExisting: forwardRef(function () { return FormArrayName; })
 };
-var FormArrayName = (function (_super) {
+/**
+ * Syncs an existing form array to a DOM element.
+ *
+ * This directive can only be used as a child of {@link FormGroupDirective}.  It also requires
+ * importing the {@link ReactiveFormsModule}.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <div>
+ *       <h2>Angular FormArray Example</h2>
+ *       <form [formGroup]="myForm">
+ *         <div formArrayName="cities">
+ *           <div *ngFor="let city of cityArray.controls; let i=index">
+ *             <input [formControlName]="i">
+ *           </div>
+ *         </div>
+ *       </form>
+ *       {{ myForm.value | json }}     // {cities: ['SF', 'NY']}
+ *     </div>
+ *   `
+ * })
+ * export class App {
+ *   cityArray = new FormArray([
+ *     new FormControl('SF'),
+ *     new FormControl('NY')
+ *   ]);
+ *   myForm = new FormGroup({
+ *     cities: this.cityArray
+ *   });
+ * }
+ * ```
+ *
+ * @stable
+ */
+export var FormArrayName = (function (_super) {
     __extends(FormArrayName, _super);
@@ -75,3 +154,7 @@ function FormArrayName(parent, validators, asyncValidators) {
     };
-    FormArrayName.prototype.ngOnDestroy = function () { this.formDirective.removeFormArray(this); };
+    FormArrayName.prototype.ngOnDestroy = function () {
+        if (this.formDirective) {
+            this.formDirective.removeFormArray(this);
+        }
+    };
     Object.defineProperty(FormArrayName.prototype, "control", {
@@ -83,3 +166,5 @@ get: function () { return this.formDirective.getFormArray(this); },
     Object.defineProperty(FormArrayName.prototype, "formDirective", {
-        get: function () { return this._parent.formDirective; },
+        get: function () {
+            return this._parent ? this._parent.formDirective : null;
+        },
         enumerable: true,
@@ -89,3 +174,3 @@ configurable: true
     Object.defineProperty(FormArrayName.prototype, "path", {
-        get: function () { return shared_1.controlPath(this.name, this._parent); },
+        get: function () { return controlPath(this.name, this._parent); },
         enumerable: true,
@@ -95,3 +180,3 @@ configurable: true
     Object.defineProperty(FormArrayName.prototype, "validator", {
-        get: function () { return shared_1.composeValidators(this._validators); },
+        get: function () { return composeValidators(this._validators); },
         enumerable: true,
@@ -101,3 +186,3 @@ configurable: true
     Object.defineProperty(FormArrayName.prototype, "asyncValidator", {
-        get: function () { return shared_1.composeAsyncValidators(this._asyncValidators); },
+        get: function () { return composeAsyncValidators(this._asyncValidators); },
         enumerable: true,
@@ -108,26 +193,23 @@ configurable: true
         if (_hasInvalidParent(this._parent)) {
-            reactive_errors_1.ReactiveErrors.arrayParentException();
+            ReactiveErrors.arrayParentException();
         }
     };
-    /** @nocollapse */
     FormArrayName.decorators = [
-        { type: core_1.Directive, args: [{ selector: '[formArrayName]', providers: [exports.formArrayNameProvider] },] },
+        { type: Directive, args: [{ selector: '[formArrayName]', providers: [formArrayNameProvider] },] },
     ];
     /** @nocollapse */
     FormArrayName.ctorParameters = [
-        { type: control_container_1.ControlContainer, decorators: [{ type: core_1.Optional }, { type: core_1.Host }, { type: core_1.SkipSelf },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_VALIDATORS,] },] },
-        { type: Array, decorators: [{ type: core_1.Optional }, { type: core_1.Self }, { type: core_1.Inject, args: [validators_1.NG_ASYNC_VALIDATORS,] },] },
+        { type: ControlContainer, decorators: [{ type: Optional }, { type: Host }, { type: SkipSelf },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_VALIDATORS,] },] },
+        { type: Array, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NG_ASYNC_VALIDATORS,] },] },
     ];
-    /** @nocollapse */
     FormArrayName.propDecorators = {
-        'name': [{ type: core_1.Input, args: ['formArrayName',] },],
+        'name': [{ type: Input, args: ['formArrayName',] },],
     };
     return FormArrayName;
-}(control_container_1.ControlContainer));
-exports.FormArrayName = FormArrayName;
+}(ControlContainer));
 function _hasInvalidParent(parent) {
-    return !(parent instanceof FormGroupName) && !(parent instanceof form_group_directive_1.FormGroupDirective) &&
+    return !(parent instanceof FormGroupName) && !(parent instanceof FormGroupDirective) &&
         !(parent instanceof FormArrayName);
 }
 //# sourceMappingURL=form_group_name.js.map

src/directives/reactive_errors.d.ts

@@ -7,2 +7,3 @@ export declare class ReactiveErrors {
     static arrayParentException(): void;
+    static disabledAttrWarning(): void;
 }

src/directives/reactive_errors.js

@@ -8,26 +8,26 @@ /**
  */
-"use strict";
-var exceptions_1 = require('../facade/exceptions');
-var error_examples_1 = require('./error_examples');
-var ReactiveErrors = (function () {
+import { FormErrorExamples as Examples } from './error_examples';
+export var ReactiveErrors = (function () {
     function ReactiveErrors() {
     }
     ReactiveErrors.controlParentException = function () {
-        throw new exceptions_1.BaseException("formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup\n       directive and pass it an existing FormGroup instance (you can create one in your class).\n\n      Example:\n\n      " + error_examples_1.FormErrorExamples.formControlName);
+        throw new Error("formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup\n       directive and pass it an existing FormGroup instance (you can create one in your class).\n\n      Example:\n\n      " + Examples.formControlName);
     };
     ReactiveErrors.ngModelGroupException = function () {
-        throw new exceptions_1.BaseException("formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents\n       that also have a \"form\" prefix: formGroupName, formArrayName, or formGroup.\n\n       Option 1:  Update the parent to be formGroupName (reactive form strategy)\n\n        " + error_examples_1.FormErrorExamples.formGroupName + "\n\n        Option 2: Use ngModel instead of formControlName (template-driven strategy)\n\n        " + error_examples_1.FormErrorExamples.ngModelGroup);
+        throw new Error("formControlName cannot be used with an ngModelGroup parent. It is only compatible with parents\n       that also have a \"form\" prefix: formGroupName, formArrayName, or formGroup.\n\n       Option 1:  Update the parent to be formGroupName (reactive form strategy)\n\n        " + Examples.formGroupName + "\n\n        Option 2: Use ngModel instead of formControlName (template-driven strategy)\n\n        " + Examples.ngModelGroup);
     };
     ReactiveErrors.missingFormException = function () {
-        throw new exceptions_1.BaseException("formGroup expects a FormGroup instance. Please pass one in.\n\n       Example:\n\n       " + error_examples_1.FormErrorExamples.formControlName);
+        throw new Error("formGroup expects a FormGroup instance. Please pass one in.\n\n       Example:\n\n       " + Examples.formControlName);
     };
     ReactiveErrors.groupParentException = function () {
-        throw new exceptions_1.BaseException("formGroupName must be used with a parent formGroup directive.  You'll want to add a formGroup\n      directive and pass it an existing FormGroup instance (you can create one in your class).\n\n      Example:\n\n      " + error_examples_1.FormErrorExamples.formGroupName);
+        throw new Error("formGroupName must be used with a parent formGroup directive.  You'll want to add a formGroup\n      directive and pass it an existing FormGroup instance (you can create one in your class).\n\n      Example:\n\n      " + Examples.formGroupName);
     };
     ReactiveErrors.arrayParentException = function () {
-        throw new exceptions_1.BaseException("formArrayName must be used with a parent formGroup directive.  You'll want to add a formGroup\n       directive and pass it an existing FormGroup instance (you can create one in your class).\n\n        Example:\n\n        " + error_examples_1.FormErrorExamples.formArrayName);
+        throw new Error("formArrayName must be used with a parent formGroup directive.  You'll want to add a formGroup\n       directive and pass it an existing FormGroup instance (you can create one in your class).\n\n        Example:\n\n        " + Examples.formArrayName);
     };
+    ReactiveErrors.disabledAttrWarning = function () {
+        console.warn("\n      It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true\n      when you set up this control in your component class, the disabled attribute will actually be set in the DOM for\n      you. We recommend using this approach to avoid 'changed after checked' errors.\n       \n      Example: \n      form = new FormGroup({\n        first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),\n        last: new FormControl('Drew', Validators.required)\n      });\n    ");
+    };
     return ReactiveErrors;
 }());
-exports.ReactiveErrors = ReactiveErrors;
 //# sourceMappingURL=reactive_errors.js.map

src/directives/select_control_value_accessor.d.ts

@@ -19,3 +19,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -32,2 +32,3 @@ export declare class SelectControlValueAccessor implements ControlValueAccessor {
     registerOnTouched(fn: () => any): void;
+    setDisabledState(isDisabled: boolean): void;
 }
@@ -45,3 +46,3 @@ /**
  *
- * @experimental
+ * @stable
  */
@@ -48,0 +49,0 @@ export declare class NgSelectOption implements OnDestroy {

src/directives/select_control_value_accessor.js

@@ -8,18 +8,17 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var collection_1 = require('../facade/collection');
-var lang_1 = require('../facade/lang');
-var control_value_accessor_1 = require('./control_value_accessor');
-exports.SELECT_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return SelectControlValueAccessor; }),
+import { Directive, ElementRef, Host, Input, Optional, Renderer, forwardRef } from '@angular/core';
+import { MapWrapper } from '../facade/collection';
+import { StringWrapper, isBlank, isPresent, isPrimitive, looseIdentical } from '../facade/lang';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+export var SELECT_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return SelectControlValueAccessor; }),
     multi: true
 };
 function _buildValueString(id, value) {
-    if (lang_1.isBlank(id))
+    if (isBlank(id))
         return "" + value;
-    if (!lang_1.isPrimitive(value))
+    if (!isPrimitive(value))
         value = 'Object';
-    return lang_1.StringWrapper.slice(id + ": " + value, 0, 50);
+    return StringWrapper.slice(id + ": " + value, 0, 50);
 }
@@ -29,3 +28,13 @@ function _extractId(valueString) {
 }
-var SelectControlValueAccessor = (function () {
+/**
+ * The accessor for writing a value and listening to changes on a select element.
+ *
+ * Note: We have to listen to the 'change' event because 'input' events aren't fired
+ * for selects in Firefox and IE:
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1024350
+ * https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/
+ *
+ * @stable
+ */
+export var SelectControlValueAccessor = (function () {
     function SelectControlValueAccessor(_renderer, _elementRef) {
@@ -54,2 +63,5 @@ this._renderer = _renderer;
     SelectControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
+    SelectControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     /** @internal */
@@ -59,5 +71,5 @@ SelectControlValueAccessor.prototype._registerOption = function () { return (this._idCounter++).toString(); };
     SelectControlValueAccessor.prototype._getOptionId = function (value) {
-        for (var _i = 0, _a = collection_1.MapWrapper.keys(this._optionMap); _i < _a.length; _i++) {
+        for (var _i = 0, _a = MapWrapper.keys(this._optionMap); _i < _a.length; _i++) {
             var id = _a[_i];
-            if (lang_1.looseIdentical(this._optionMap.get(id), value))
+            if (looseIdentical(this._optionMap.get(id), value))
                 return id;
@@ -70,10 +82,9 @@ }
         var value = this._optionMap.get(_extractId(valueString));
-        return lang_1.isPresent(value) ? value : valueString;
+        return isPresent(value) ? value : valueString;
     };
-    /** @nocollapse */
     SelectControlValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]',
                     host: { '(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()' },
-                    providers: [exports.SELECT_VALUE_ACCESSOR]
+                    providers: [SELECT_VALUE_ACCESSOR]
                 },] },
@@ -83,9 +94,21 @@ ];
     SelectControlValueAccessor.ctorParameters = [
-        { type: core_1.Renderer, },
-        { type: core_1.ElementRef, },
+        { type: Renderer, },
+        { type: ElementRef, },
     ];
     return SelectControlValueAccessor;
 }());
-exports.SelectControlValueAccessor = SelectControlValueAccessor;
-var NgSelectOption = (function () {
+/**
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
+ *
+ * ### Example
+ *
+ * ```
+ * <select name="city" ngModel>
+ *   <option *ngFor="let c of cities" [value]="c"></option>
+ * </select>
+ * ```
+ *
+ * @stable
+ */
+export var NgSelectOption = (function () {
     function NgSelectOption(_element, _renderer, _select) {
@@ -95,3 +118,3 @@ this._element = _element;
         this._select = _select;
-        if (lang_1.isPresent(this._select))
+        if (isPresent(this._select))
             this.id = this._select._registerOption();
@@ -113,3 +136,3 @@ }
             this._setElementValue(value);
-            if (lang_1.isPresent(this._select))
+            if (isPresent(this._select))
                 this._select.writeValue(this._select.value);
@@ -125,3 +148,3 @@ },
     NgSelectOption.prototype.ngOnDestroy = function () {
-        if (lang_1.isPresent(this._select)) {
+        if (isPresent(this._select)) {
             this._select._optionMap.delete(this.id);
@@ -131,20 +154,17 @@ this._select.writeValue(this._select.value);
     };
-    /** @nocollapse */
     NgSelectOption.decorators = [
-        { type: core_1.Directive, args: [{ selector: 'option' },] },
+        { type: Directive, args: [{ selector: 'option' },] },
     ];
     /** @nocollapse */
     NgSelectOption.ctorParameters = [
-        { type: core_1.ElementRef, },
-        { type: core_1.Renderer, },
-        { type: SelectControlValueAccessor, decorators: [{ type: core_1.Optional }, { type: core_1.Host },] },
+        { type: ElementRef, },
+        { type: Renderer, },
+        { type: SelectControlValueAccessor, decorators: [{ type: Optional }, { type: Host },] },
     ];
-    /** @nocollapse */
     NgSelectOption.propDecorators = {
-        'ngValue': [{ type: core_1.Input, args: ['ngValue',] },],
-        'value': [{ type: core_1.Input, args: ['value',] },],
+        'ngValue': [{ type: Input, args: ['ngValue',] },],
+        'value': [{ type: Input, args: ['value',] },],
     };
     return NgSelectOption;
 }());
-exports.NgSelectOption = NgSelectOption;
 //# sourceMappingURL=select_control_value_accessor.js.map

src/directives/select_control_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectControlValueAccessor"},"multi":true},"SelectControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]","host":{"(change)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_registerOption":[{"__symbolic":"method"}],"_getOptionId":[{"__symbolic":"method"}],"_getOptionValue":[{"__symbolic":"method"}]}},"NgSelectOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"option"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"SelectControlValueAccessor"}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngValue"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["value"]}]}],"_setElementValue":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"SELECT_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectControlValueAccessor"},"multi":true},"SelectControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]","host":{"(change)":"onChange($event.target.value)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"SELECT_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_registerOption":[{"__symbolic":"method"}],"_getOptionId":[{"__symbolic":"method"}],"_getOptionValue":[{"__symbolic":"method"}]}},"NgSelectOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"option"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"SelectControlValueAccessor"}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngValue"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["value"]}]}],"_setElementValue":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}

src/directives/select_multiple_control_value_accessor.d.ts

@@ -12,3 +12,3 @@ /**
     provide: OpaqueToken;
-    useExisting: Type;
+    useExisting: Type<any>;
     multi: boolean;
@@ -19,12 +19,15 @@ };
  *
- * @experimental
+ * @stable
  */
 export declare class SelectMultipleControlValueAccessor implements ControlValueAccessor {
+    private _renderer;
+    private _elementRef;
     value: any;
     onChange: (_: any) => void;
     onTouched: () => void;
-    constructor();
+    constructor(_renderer: Renderer, _elementRef: ElementRef);
     writeValue(value: any): void;
     registerOnChange(fn: (value: any) => any): void;
     registerOnTouched(fn: () => any): void;
+    setDisabledState(isDisabled: boolean): void;
 }
@@ -31,0 +34,0 @@ /**

src/directives/select_multiple_control_value_accessor.js

@@ -8,20 +8,19 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var collection_1 = require('../facade/collection');
-var lang_1 = require('../facade/lang');
-var control_value_accessor_1 = require('./control_value_accessor');
-exports.SELECT_MULTIPLE_VALUE_ACCESSOR = {
-    provide: control_value_accessor_1.NG_VALUE_ACCESSOR,
-    useExisting: core_1.forwardRef(function () { return SelectMultipleControlValueAccessor; }),
+import { Directive, ElementRef, Host, Input, Optional, Renderer, forwardRef } from '@angular/core';
+import { MapWrapper } from '../facade/collection';
+import { StringWrapper, isBlank, isPresent, isPrimitive, isString, looseIdentical } from '../facade/lang';
+import { NG_VALUE_ACCESSOR } from './control_value_accessor';
+export var SELECT_MULTIPLE_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(function () { return SelectMultipleControlValueAccessor; }),
     multi: true
 };
 function _buildValueString(id, value) {
-    if (lang_1.isBlank(id))
+    if (isBlank(id))
         return "" + value;
-    if (lang_1.isString(value))
+    if (isString(value))
         value = "'" + value + "'";
-    if (!lang_1.isPrimitive(value))
+    if (!isPrimitive(value))
         value = 'Object';
-    return lang_1.StringWrapper.slice(id + ": " + value, 0, 50);
+    return StringWrapper.slice(id + ": " + value, 0, 50);
 }
@@ -37,4 +36,11 @@ function _extractId(valueString) {
 }());
-var SelectMultipleControlValueAccessor = (function () {
-    function SelectMultipleControlValueAccessor() {
+/**
+ * The accessor for writing a value and listening to changes on a select element.
+ *
+ * @stable
+ */
+export var SelectMultipleControlValueAccessor = (function () {
+    function SelectMultipleControlValueAccessor(_renderer, _elementRef) {
+        this._renderer = _renderer;
+        this._elementRef = _elementRef;
         /** @internal */
@@ -83,2 +89,5 @@ this._optionMap = new Map();
     SelectMultipleControlValueAccessor.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
+    SelectMultipleControlValueAccessor.prototype.setDisabledState = function (isDisabled) {
+        this._renderer.setElementProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
+    };
     /** @internal */
@@ -92,5 +101,5 @@ SelectMultipleControlValueAccessor.prototype._registerOption = function (value) {
     SelectMultipleControlValueAccessor.prototype._getOptionId = function (value) {
-        for (var _i = 0, _a = collection_1.MapWrapper.keys(this._optionMap); _i < _a.length; _i++) {
+        for (var _i = 0, _a = MapWrapper.keys(this._optionMap); _i < _a.length; _i++) {
             var id = _a[_i];
-            if (lang_1.looseIdentical(this._optionMap.get(id)._value, value))
+            if (looseIdentical(this._optionMap.get(id)._value, value))
                 return id;
@@ -103,18 +112,30 @@ }
         var opt = this._optionMap.get(_extractId(valueString));
-        return lang_1.isPresent(opt) ? opt._value : valueString;
+        return isPresent(opt) ? opt._value : valueString;
     };
-    /** @nocollapse */
     SelectMultipleControlValueAccessor.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: 'select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]',
                     host: { '(change)': 'onChange($event.target)', '(blur)': 'onTouched()' },
-                    providers: [exports.SELECT_MULTIPLE_VALUE_ACCESSOR]
+                    providers: [SELECT_MULTIPLE_VALUE_ACCESSOR]
                 },] },
     ];
     /** @nocollapse */
-    SelectMultipleControlValueAccessor.ctorParameters = [];
+    SelectMultipleControlValueAccessor.ctorParameters = [
+        { type: Renderer, },
+        { type: ElementRef, },
+    ];
     return SelectMultipleControlValueAccessor;
 }());
-exports.SelectMultipleControlValueAccessor = SelectMultipleControlValueAccessor;
-var NgSelectMultipleOption = (function () {
+/**
+ * Marks `<option>` as dynamic, so Angular can be notified when options change.
+ *
+ * ### Example
+ *
+ * ```
+ * <select multiple name="city" ngModel>
+ *   <option *ngFor="let c of cities" [value]="c"></option>
+ * </select>
+ * ```
+ */
+export var NgSelectMultipleOption = (function () {
     function NgSelectMultipleOption(_element, _renderer, _select) {
@@ -124,3 +145,3 @@ this._element = _element;
         this._select = _select;
-        if (lang_1.isPresent(this._select)) {
+        if (isPresent(this._select)) {
             this.id = this._select._registerOption(this);
@@ -142,3 +163,3 @@ }
         set: function (value) {
-            if (lang_1.isPresent(this._select)) {
+            if (isPresent(this._select)) {
                 this._value = value;
@@ -164,3 +185,3 @@ this._setElementValue(_buildValueString(this.id, value));
     NgSelectMultipleOption.prototype.ngOnDestroy = function () {
-        if (lang_1.isPresent(this._select)) {
+        if (isPresent(this._select)) {
             this._select._optionMap.delete(this.id);
@@ -170,21 +191,18 @@ this._select.writeValue(this._select.value);
     };
-    /** @nocollapse */
     NgSelectMultipleOption.decorators = [
-        { type: core_1.Directive, args: [{ selector: 'option' },] },
+        { type: Directive, args: [{ selector: 'option' },] },
     ];
     /** @nocollapse */
     NgSelectMultipleOption.ctorParameters = [
-        { type: core_1.ElementRef, },
-        { type: core_1.Renderer, },
-        { type: SelectMultipleControlValueAccessor, decorators: [{ type: core_1.Optional }, { type: core_1.Host },] },
+        { type: ElementRef, },
+        { type: Renderer, },
+        { type: SelectMultipleControlValueAccessor, decorators: [{ type: Optional }, { type: Host },] },
     ];
-    /** @nocollapse */
     NgSelectMultipleOption.propDecorators = {
-        'ngValue': [{ type: core_1.Input, args: ['ngValue',] },],
-        'value': [{ type: core_1.Input, args: ['value',] },],
+        'ngValue': [{ type: Input, args: ['ngValue',] },],
+        'value': [{ type: Input, args: ['value',] },],
     };
     return NgSelectMultipleOption;
 }());
-exports.NgSelectMultipleOption = NgSelectMultipleOption;
-exports.SELECT_DIRECTIVES = [SelectMultipleControlValueAccessor, NgSelectMultipleOption];
+export var SELECT_DIRECTIVES = [SelectMultipleControlValueAccessor, NgSelectMultipleOption];
 //# sourceMappingURL=select_multiple_control_value_accessor.js.map

src/directives/select_multiple_control_value_accessor.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"SELECT_MULTIPLE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"},"multi":true},"SelectMultipleControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]","host":{"(change)":"onChange($event.target)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"SELECT_MULTIPLE_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_registerOption":[{"__symbolic":"method"}],"_getOptionId":[{"__symbolic":"method"}],"_getOptionValue":[{"__symbolic":"method"}]}},"NgSelectMultipleOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"option"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngValue"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["value"]}]}],"_setElementValue":[{"__symbolic":"method"}],"_setSelected":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SELECT_DIRECTIVES":[{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"},{"__symbolic":"reference","name":"NgSelectMultipleOption"}]}}
+{"__symbolic":"module","version":1,"metadata":{"SELECT_MULTIPLE_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"./control_value_accessor","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"},"multi":true},"SelectMultipleControlValueAccessor":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]","host":{"(change)":"onChange($event.target)","(blur)":"onTouched()"},"providers":[{"__symbolic":"reference","name":"SELECT_MULTIPLE_VALUE_ACCESSOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"_registerOption":[{"__symbolic":"method"}],"_getOptionId":[{"__symbolic":"method"}],"_getOptionValue":[{"__symbolic":"method"}]}},"NgSelectMultipleOption":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"option"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional"}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer"},{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"}]}],"ngValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["ngValue"]}]}],"value":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["value"]}]}],"_setElementValue":[{"__symbolic":"method"}],"_setSelected":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SELECT_DIRECTIVES":[{"__symbolic":"reference","name":"SelectMultipleControlValueAccessor"},{"__symbolic":"reference","name":"NgSelectMultipleOption"}]}}

src/directives/shared.d.ts

@@ -10,2 +10,3 @@ import { FormArray, FormControl, FormGroup } from '../model';
 export declare function setUpControl(control: FormControl, dir: NgControl): void;
+export declare function cleanUpControl(control: FormControl, dir: NgControl): void;
 export declare function setUpFormContainer(control: FormGroup | FormArray, dir: AbstractFormGroupDirective | FormArrayName): void;
@@ -17,2 +18,3 @@ export declare function composeValidators(validators: any[]): ValidatorFn;
 }, viewModel: any): boolean;
+export declare function isBuiltInAccessor(valueAccessor: ControlValueAccessor): boolean;
 export declare function selectValueAccessor(dir: NgControl, valueAccessors: ControlValueAccessor[]): ControlValueAccessor;

src/directives/shared.js

@@ -8,27 +8,24 @@ /**
  */
-"use strict";
-var collection_1 = require('../facade/collection');
-var exceptions_1 = require('../facade/exceptions');
-var lang_1 = require('../facade/lang');
-var validators_1 = require('../validators');
-var checkbox_value_accessor_1 = require('./checkbox_value_accessor');
-var default_value_accessor_1 = require('./default_value_accessor');
-var normalize_validator_1 = require('./normalize_validator');
-var number_value_accessor_1 = require('./number_value_accessor');
-var radio_control_value_accessor_1 = require('./radio_control_value_accessor');
-var select_control_value_accessor_1 = require('./select_control_value_accessor');
-var select_multiple_control_value_accessor_1 = require('./select_multiple_control_value_accessor');
-function controlPath(name, parent) {
-    var p = collection_1.ListWrapper.clone(parent.path);
+import { ListWrapper, StringMapWrapper } from '../facade/collection';
+import { hasConstructor, isBlank, isPresent, looseIdentical } from '../facade/lang';
+import { Validators } from '../validators';
+import { CheckboxControlValueAccessor } from './checkbox_value_accessor';
+import { DefaultValueAccessor } from './default_value_accessor';
+import { normalizeAsyncValidator, normalizeValidator } from './normalize_validator';
+import { NumberValueAccessor } from './number_value_accessor';
+import { RadioControlValueAccessor } from './radio_control_value_accessor';
+import { SelectControlValueAccessor } from './select_control_value_accessor';
+import { SelectMultipleControlValueAccessor } from './select_multiple_control_value_accessor';
+export function controlPath(name, parent) {
+    var p = ListWrapper.clone(parent.path);
     p.push(name);
     return p;
 }
-exports.controlPath = controlPath;
-function setUpControl(control, dir) {
-    if (lang_1.isBlank(control))
+export function setUpControl(control, dir) {
+    if (isBlank(control))
         _throwError(dir, 'Cannot find control with');
-    if (lang_1.isBlank(dir.valueAccessor))
+    if (isBlank(dir.valueAccessor))
         _throwError(dir, 'No value accessor for form control with');
-    control.validator = validators_1.Validators.compose([control.validator, dir.validator]);
-    control.asyncValidator = validators_1.Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
+    control.validator = Validators.compose([control.validator, dir.validator]);
+    control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
     dir.valueAccessor.writeValue(control.value);
@@ -41,2 +38,4 @@ // view -> model
     });
+    // touched
+    dir.valueAccessor.registerOnTouched(function () { return control.markAsTouched(); });
     control.registerOnChange(function (newValue, emitModelEvent) {
@@ -49,13 +48,32 @@ // control -> view
     });
-    // touched
-    dir.valueAccessor.registerOnTouched(function () { return control.markAsTouched(); });
+    if (dir.valueAccessor.setDisabledState) {
+        control.registerOnDisabledChange(function (isDisabled) { dir.valueAccessor.setDisabledState(isDisabled); });
+    }
+    // re-run validation when validator binding changes, e.g. minlength=3 -> minlength=4
+    dir._rawValidators.forEach(function (validator) {
+        if (validator.registerOnChange)
+            validator.registerOnChange(function () { return control.updateValueAndValidity(); });
+    });
+    dir._rawAsyncValidators.forEach(function (validator) {
+        if (validator.registerOnChange)
+            validator.registerOnChange(function () { return control.updateValueAndValidity(); });
+    });
 }
-exports.setUpControl = setUpControl;
-function setUpFormContainer(control, dir) {
-    if (lang_1.isBlank(control))
+export function cleanUpControl(control, dir) {
+    dir.valueAccessor.registerOnChange(function () { return _noControlError(dir); });
+    dir.valueAccessor.registerOnTouched(function () { return _noControlError(dir); });
+    dir._rawValidators.forEach(function (validator) { return validator.registerOnChange(null); });
+    dir._rawAsyncValidators.forEach(function (validator) { return validator.registerOnChange(null); });
+    if (control)
+        control._clearChangeFns();
+}
+export function setUpFormContainer(control, dir) {
+    if (isBlank(control))
         _throwError(dir, 'Cannot find control with');
-    control.validator = validators_1.Validators.compose([control.validator, dir.validator]);
-    control.asyncValidator = validators_1.Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
+    control.validator = Validators.compose([control.validator, dir.validator]);
+    control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]);
 }
-exports.setUpFormContainer = setUpFormContainer;
+function _noControlError(dir) {
+    return _throwError(dir, 'There is no FormControl instance attached to form control element with');
+}
 function _throwError(dir, message) {
@@ -72,15 +90,13 @@ var messageEnd;
     }
-    throw new exceptions_1.BaseException(message + " " + messageEnd);
+    throw new Error(message + " " + messageEnd);
 }
-function composeValidators(validators) {
-    return lang_1.isPresent(validators) ? validators_1.Validators.compose(validators.map(normalize_validator_1.normalizeValidator)) : null;
+export function composeValidators(validators) {
+    return isPresent(validators) ? Validators.compose(validators.map(normalizeValidator)) : null;
 }
-exports.composeValidators = composeValidators;
-function composeAsyncValidators(validators) {
-    return lang_1.isPresent(validators) ? validators_1.Validators.composeAsync(validators.map(normalize_validator_1.normalizeAsyncValidator)) :
+export function composeAsyncValidators(validators) {
+    return isPresent(validators) ? Validators.composeAsync(validators.map(normalizeAsyncValidator)) :
         null;
 }
-exports.composeAsyncValidators = composeAsyncValidators;
-function isPropertyUpdated(changes, viewModel) {
-    if (!collection_1.StringMapWrapper.contains(changes, 'model'))
+export function isPropertyUpdated(changes, viewModel) {
+    if (!StringMapWrapper.contains(changes, 'model'))
         return false;
@@ -90,8 +106,14 @@ var change = changes['model'];
         return true;
-    return !lang_1.looseIdentical(viewModel, change.currentValue);
+    return !looseIdentical(viewModel, change.currentValue);
 }
-exports.isPropertyUpdated = isPropertyUpdated;
+export function isBuiltInAccessor(valueAccessor) {
+    return (hasConstructor(valueAccessor, CheckboxControlValueAccessor) ||
+        hasConstructor(valueAccessor, NumberValueAccessor) ||
+        hasConstructor(valueAccessor, SelectControlValueAccessor) ||
+        hasConstructor(valueAccessor, SelectMultipleControlValueAccessor) ||
+        hasConstructor(valueAccessor, RadioControlValueAccessor));
+}
 // TODO: vsavkin remove it once https://github.com/angular/angular/issues/3011 is implemented
-function selectValueAccessor(dir, valueAccessors) {
-    if (lang_1.isBlank(valueAccessors))
+export function selectValueAccessor(dir, valueAccessors) {
+    if (isBlank(valueAccessors))
         return null;
@@ -102,10 +124,7 @@ var defaultAccessor;
     valueAccessors.forEach(function (v) {
-        if (lang_1.hasConstructor(v, default_value_accessor_1.DefaultValueAccessor)) {
+        if (hasConstructor(v, DefaultValueAccessor)) {
             defaultAccessor = v;
         }
-        else if (lang_1.hasConstructor(v, checkbox_value_accessor_1.CheckboxControlValueAccessor) || lang_1.hasConstructor(v, number_value_accessor_1.NumberValueAccessor) ||
-            lang_1.hasConstructor(v, select_control_value_accessor_1.SelectControlValueAccessor) ||
-            lang_1.hasConstructor(v, select_multiple_control_value_accessor_1.SelectMultipleControlValueAccessor) ||
-            lang_1.hasConstructor(v, radio_control_value_accessor_1.RadioControlValueAccessor)) {
-            if (lang_1.isPresent(builtinAccessor))
+        else if (isBuiltInAccessor(v)) {
+            if (isPresent(builtinAccessor))
                 _throwError(dir, 'More than one built-in value accessor matches form control with');
@@ -115,3 +134,3 @@ builtinAccessor = v;
         else {
-            if (lang_1.isPresent(customAccessor))
+            if (isPresent(customAccessor))
                 _throwError(dir, 'More than one custom value accessor matches form control with');
@@ -121,7 +140,7 @@ customAccessor = v;
     });
-    if (lang_1.isPresent(customAccessor))
+    if (isPresent(customAccessor))
         return customAccessor;
-    if (lang_1.isPresent(builtinAccessor))
+    if (isPresent(builtinAccessor))
         return builtinAccessor;
-    if (lang_1.isPresent(defaultAccessor))
+    if (isPresent(defaultAccessor))
         return defaultAccessor;
@@ -131,3 +150,2 @@ _throwError(dir, 'No valid value accessor for form control with');
 }
-exports.selectValueAccessor = selectValueAccessor;
 //# sourceMappingURL=shared.js.map

src/directives/shared.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"composeValidators":{"__symbolic":"function","parameters":["validators"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"validators"}]},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../validators","name":"Validators"},"member":"compose"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"validators"},"member":"map"},"arguments":[{"__symbolic":"reference","module":"./normalize_validator","name":"normalizeValidator"}]}]},"elseExpression":null}},"composeAsyncValidators":{"__symbolic":"function","parameters":["validators"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"validators"}]},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../validators","name":"Validators"},"member":"composeAsync"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"validators"},"member":"map"},"arguments":[{"__symbolic":"reference","module":"./normalize_validator","name":"normalizeAsyncValidator"}]}]},"elseExpression":null}}}}
+{"__symbolic":"module","version":1,"metadata":{"composeValidators":{"__symbolic":"function","parameters":["validators"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"validators"}]},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../validators","name":"Validators"},"member":"compose"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"validators"},"member":"map"},"arguments":[{"__symbolic":"reference","module":"./normalize_validator","name":"normalizeValidator"}]}]},"elseExpression":null}},"composeAsyncValidators":{"__symbolic":"function","parameters":["validators"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"validators"}]},"thenExpression":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../validators","name":"Validators"},"member":"composeAsync"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"validators"},"member":"map"},"arguments":[{"__symbolic":"reference","module":"./normalize_validator","name":"normalizeAsyncValidator"}]}]},"elseExpression":null}},"isBuiltInAccessor":{"__symbolic":"function","parameters":["valueAccessor"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"hasConstructor"},"arguments":[{"__symbolic":"reference","name":"valueAccessor"},{"__symbolic":"reference","module":"./checkbox_value_accessor","name":"CheckboxControlValueAccessor"}]},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"hasConstructor"},"arguments":[{"__symbolic":"reference","name":"valueAccessor"},{"__symbolic":"reference","module":"./number_value_accessor","name":"NumberValueAccessor"}]}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"hasConstructor"},"arguments":[{"__symbolic":"reference","name":"valueAccessor"},{"__symbolic":"reference","module":"./select_control_value_accessor","name":"SelectControlValueAccessor"}]}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"hasConstructor"},"arguments":[{"__symbolic":"reference","name":"valueAccessor"},{"__symbolic":"reference","module":"./select_multiple_control_value_accessor","name":"SelectMultipleControlValueAccessor"}]}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"../facade/lang","name":"hasConstructor"},"arguments":[{"__symbolic":"reference","name":"valueAccessor"},{"__symbolic":"reference","module":"./radio_control_value_accessor","name":"RadioControlValueAccessor"}]}}}}}

src/directives/template_driven_errors.js

@@ -8,23 +8,20 @@ /**
  */
-"use strict";
-var exceptions_1 = require('../facade/exceptions');
-var error_examples_1 = require('./error_examples');
-var TemplateDrivenErrors = (function () {
+import { FormErrorExamples as Examples } from './error_examples';
+export var TemplateDrivenErrors = (function () {
     function TemplateDrivenErrors() {
     }
     TemplateDrivenErrors.modelParentException = function () {
-        throw new exceptions_1.BaseException("\n      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using\n      formGroup's partner directive \"formControlName\" instead.  Example:\n\n      " + error_examples_1.FormErrorExamples.formControlName + "\n\n      Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:\n\n      Example:\n\n      " + error_examples_1.FormErrorExamples.ngModelWithFormGroup);
+        throw new Error("\n      ngModel cannot be used to register form controls with a parent formGroup directive.  Try using\n      formGroup's partner directive \"formControlName\" instead.  Example:\n\n      " + Examples.formControlName + "\n\n      Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:\n\n      Example:\n\n      " + Examples.ngModelWithFormGroup);
     };
     TemplateDrivenErrors.formGroupNameException = function () {
-        throw new exceptions_1.BaseException("\n      ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.\n\n      Option 1: Use formControlName instead of ngModel (reactive strategy):\n\n      " + error_examples_1.FormErrorExamples.formGroupName + "\n\n      Option 2:  Update ngModel's parent be ngModelGroup (template-driven strategy):\n\n      " + error_examples_1.FormErrorExamples.ngModelGroup);
+        throw new Error("\n      ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.\n\n      Option 1: Use formControlName instead of ngModel (reactive strategy):\n\n      " + Examples.formGroupName + "\n\n      Option 2:  Update ngModel's parent be ngModelGroup (template-driven strategy):\n\n      " + Examples.ngModelGroup);
     };
     TemplateDrivenErrors.missingNameException = function () {
-        throw new exceptions_1.BaseException("If ngModel is used within a form tag, either the name attribute must be set or the form\n      control must be defined as 'standalone' in ngModelOptions.\n\n      Example 1: <input [(ngModel)]=\"person.firstName\" name=\"first\">\n      Example 2: <input [(ngModel)]=\"person.firstName\" [ngModelOptions]=\"{standalone: true}\">");
+        throw new Error("If ngModel is used within a form tag, either the name attribute must be set or the form\n      control must be defined as 'standalone' in ngModelOptions.\n\n      Example 1: <input [(ngModel)]=\"person.firstName\" name=\"first\">\n      Example 2: <input [(ngModel)]=\"person.firstName\" [ngModelOptions]=\"{standalone: true}\">");
     };
     TemplateDrivenErrors.modelGroupParentException = function () {
-        throw new exceptions_1.BaseException("\n      ngModelGroup cannot be used with a parent formGroup directive.\n\n      Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):\n\n      " + error_examples_1.FormErrorExamples.formGroupName + "\n\n      Option 2:  Use a regular form tag instead of the formGroup directive (template-driven strategy):\n\n      " + error_examples_1.FormErrorExamples.ngModelGroup);
+        throw new Error("\n      ngModelGroup cannot be used with a parent formGroup directive.\n\n      Option 1: Use formGroupName instead of ngModelGroup (reactive strategy):\n\n      " + Examples.formGroupName + "\n\n      Option 2:  Use a regular form tag instead of the formGroup directive (template-driven strategy):\n\n      " + Examples.ngModelGroup);
     };
     return TemplateDrivenErrors;
 }());
-exports.TemplateDrivenErrors = TemplateDrivenErrors;
 //# sourceMappingURL=template_driven_errors.js.map

src/directives/validators.d.ts

@@ -0,3 +1,10 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { OnChanges, SimpleChanges } from '@angular/core';
 import { AbstractControl } from '../model';
-import { Validators } from '../validators';
 /**
@@ -20,3 +27,3 @@ * An interface that can be implemented by classes that can act as validators.
  *
- * @experimental
+ * @stable
  */
@@ -27,4 +34,4 @@ export interface Validator {
     };
+    registerOnChange?(fn: () => void): void;
 }
-export declare const REQUIRED: typeof Validators.required;
 export declare const REQUIRED_VALIDATOR: any;
@@ -41,8 +48,15 @@ /**
  *
- * @experimental
+ * @stable
  */
-export declare class RequiredValidator {
+export declare class RequiredValidator implements Validator {
+    private _required;
+    private _onChange;
+    required: boolean;
+    validate(c: AbstractControl): {
+        [key: string]: any;
+    };
+    registerOnChange(fn: () => void): void;
 }
 /**
- * @experimental
+ * @stable
  */
@@ -55,3 +69,3 @@ export interface ValidatorFn {
 /**
- * @experimental
+ * @stable
  */
@@ -73,10 +87,14 @@ export interface AsyncValidatorFn {
  *
- * @experimental
+ * @stable
  */
-export declare class MinLengthValidator implements Validator {
+export declare class MinLengthValidator implements Validator, OnChanges {
     private _validator;
-    constructor(minLength: string);
+    private _onChange;
+    minlength: string;
+    private _createValidator();
+    ngOnChanges(changes: SimpleChanges): void;
     validate(c: AbstractControl): {
         [key: string]: any;
     };
+    registerOnChange(fn: () => void): void;
 }
@@ -96,10 +114,14 @@ /**
  *
- * @experimental
+ * @stable
  */
-export declare class MaxLengthValidator implements Validator {
+export declare class MaxLengthValidator implements Validator, OnChanges {
     private _validator;
-    constructor(maxLength: string);
+    private _onChange;
+    maxlength: string;
+    private _createValidator();
+    ngOnChanges(changes: SimpleChanges): void;
     validate(c: AbstractControl): {
         [key: string]: any;
     };
+    registerOnChange(fn: () => void): void;
 }
@@ -118,10 +140,14 @@ export declare const PATTERN_VALIDATOR: any;
  * ```
- * @experimental
+ * @stable
  */
-export declare class PatternValidator implements Validator {
+export declare class PatternValidator implements Validator, OnChanges {
     private _validator;
-    constructor(pattern: string);
+    private _onChange;
+    pattern: string;
+    private _createValidator();
+    ngOnChanges(changes: SimpleChanges): void;
     validate(c: AbstractControl): {
         [key: string]: any;
     };
+    registerOnChange(fn: () => void): void;
 }

src/directives/validators.js

@@ -8,25 +8,53 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var lang_1 = require('../facade/lang');
-var validators_1 = require('../validators');
-exports.REQUIRED = validators_1.Validators.required;
-exports.REQUIRED_VALIDATOR = {
-    provide: validators_1.NG_VALIDATORS,
-    useValue: exports.REQUIRED,
+import { Directive, Input, forwardRef } from '@angular/core';
+import { isPresent } from '../facade/lang';
+import { NG_VALIDATORS, Validators } from '../validators';
+export var REQUIRED_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(function () { return RequiredValidator; }),
     multi: true
 };
-var RequiredValidator = (function () {
+/**
+ * A Directive that adds the `required` validator to any controls marked with the
+ * `required` attribute, via the {@link NG_VALIDATORS} binding.
+ *
+ * ### Example
+ *
+ * ```
+ * <input name="fullName" ngModel required>
+ * ```
+ *
+ * @stable
+ */
+export var RequiredValidator = (function () {
     function RequiredValidator() {
     }
-    /** @nocollapse */
+    Object.defineProperty(RequiredValidator.prototype, "required", {
+        get: function () { return this._required; },
+        set: function (value) {
+            this._required = isPresent(value) && "" + value !== 'false';
+            if (this._onChange)
+                this._onChange();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    RequiredValidator.prototype.validate = function (c) {
+        return this.required ? Validators.required(c) : null;
+    };
+    RequiredValidator.prototype.registerOnChange = function (fn) { this._onChange = fn; };
     RequiredValidator.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[required][formControlName],[required][formControl],[required][ngModel]',
-                    providers: [exports.REQUIRED_VALIDATOR]
+                    providers: [REQUIRED_VALIDATOR],
+                    host: { '[attr.required]': 'required? "" : null' }
                 },] },
     ];
+    /** @nocollapse */
+    RequiredValidator.ctorParameters = [];
+    RequiredValidator.propDecorators = {
+        'required': [{ type: Input },],
+    };
     return RequiredValidator;
 }());
-exports.RequiredValidator = RequiredValidator;
 /**
@@ -39,26 +67,44 @@ * Provider which adds {@link MinLengthValidator} to {@link NG_VALIDATORS}.
  */
-exports.MIN_LENGTH_VALIDATOR = {
-    provide: validators_1.NG_VALIDATORS,
-    useExisting: core_1.forwardRef(function () { return MinLengthValidator; }),
+export var MIN_LENGTH_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(function () { return MinLengthValidator; }),
     multi: true
 };
-var MinLengthValidator = (function () {
-    function MinLengthValidator(minLength) {
-        this._validator = validators_1.Validators.minLength(lang_1.NumberWrapper.parseInt(minLength, 10));
+/**
+ * A directive which installs the {@link MinLengthValidator} for any `formControlName`,
+ * `formControl`, or control with `ngModel` that also has a `minlength` attribute.
+ *
+ * @stable
+ */
+export var MinLengthValidator = (function () {
+    function MinLengthValidator() {
     }
-    MinLengthValidator.prototype.validate = function (c) { return this._validator(c); };
-    /** @nocollapse */
+    MinLengthValidator.prototype._createValidator = function () {
+        this._validator = Validators.minLength(parseInt(this.minlength, 10));
+    };
+    MinLengthValidator.prototype.ngOnChanges = function (changes) {
+        if (changes['minlength']) {
+            this._createValidator();
+            if (this._onChange)
+                this._onChange();
+        }
+    };
+    MinLengthValidator.prototype.validate = function (c) {
+        return isPresent(this.minlength) ? this._validator(c) : null;
+    };
+    MinLengthValidator.prototype.registerOnChange = function (fn) { this._onChange = fn; };
     MinLengthValidator.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]',
-                    providers: [exports.MIN_LENGTH_VALIDATOR]
+                    providers: [MIN_LENGTH_VALIDATOR],
+                    host: { '[attr.minlength]': 'minlength? minlength : null' }
                 },] },
     ];
     /** @nocollapse */
-    MinLengthValidator.ctorParameters = [
-        { type: undefined, decorators: [{ type: core_1.Attribute, args: ['minlength',] },] },
-    ];
+    MinLengthValidator.ctorParameters = [];
+    MinLengthValidator.propDecorators = {
+        'minlength': [{ type: Input },],
+    };
     return MinLengthValidator;
 }());
-exports.MinLengthValidator = MinLengthValidator;
 /**
@@ -71,50 +117,92 @@ * Provider which adds {@link MaxLengthValidator} to {@link NG_VALIDATORS}.
  */
-exports.MAX_LENGTH_VALIDATOR = {
-    provide: validators_1.NG_VALIDATORS,
-    useExisting: core_1.forwardRef(function () { return MaxLengthValidator; }),
+export var MAX_LENGTH_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(function () { return MaxLengthValidator; }),
     multi: true
 };
-var MaxLengthValidator = (function () {
-    function MaxLengthValidator(maxLength) {
-        this._validator = validators_1.Validators.maxLength(lang_1.NumberWrapper.parseInt(maxLength, 10));
+/**
+ * A directive which installs the {@link MaxLengthValidator} for any `formControlName,
+ * `formControl`,
+ * or control with `ngModel` that also has a `maxlength` attribute.
+ *
+ * @stable
+ */
+export var MaxLengthValidator = (function () {
+    function MaxLengthValidator() {
     }
-    MaxLengthValidator.prototype.validate = function (c) { return this._validator(c); };
-    /** @nocollapse */
+    MaxLengthValidator.prototype._createValidator = function () {
+        this._validator = Validators.maxLength(parseInt(this.maxlength, 10));
+    };
+    MaxLengthValidator.prototype.ngOnChanges = function (changes) {
+        if (changes['maxlength']) {
+            this._createValidator();
+            if (this._onChange)
+                this._onChange();
+        }
+    };
+    MaxLengthValidator.prototype.validate = function (c) {
+        return isPresent(this.maxlength) ? this._validator(c) : null;
+    };
+    MaxLengthValidator.prototype.registerOnChange = function (fn) { this._onChange = fn; };
     MaxLengthValidator.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]',
-                    providers: [exports.MAX_LENGTH_VALIDATOR]
+                    providers: [MAX_LENGTH_VALIDATOR],
+                    host: { '[attr.maxlength]': 'maxlength? maxlength : null' }
                 },] },
     ];
     /** @nocollapse */
-    MaxLengthValidator.ctorParameters = [
-        { type: undefined, decorators: [{ type: core_1.Attribute, args: ['maxlength',] },] },
-    ];
+    MaxLengthValidator.ctorParameters = [];
+    MaxLengthValidator.propDecorators = {
+        'maxlength': [{ type: Input },],
+    };
     return MaxLengthValidator;
 }());
-exports.MaxLengthValidator = MaxLengthValidator;
-exports.PATTERN_VALIDATOR = {
-    provide: validators_1.NG_VALIDATORS,
-    useExisting: core_1.forwardRef(function () { return PatternValidator; }),
+export var PATTERN_VALIDATOR = {
+    provide: NG_VALIDATORS,
+    useExisting: forwardRef(function () { return PatternValidator; }),
     multi: true
 };
-var PatternValidator = (function () {
-    function PatternValidator(pattern) {
-        this._validator = validators_1.Validators.pattern(pattern);
+/**
+ * A Directive that adds the `pattern` validator to any controls marked with the
+ * `pattern` attribute, via the {@link NG_VALIDATORS} binding. Uses attribute value
+ * as the regex to validate Control value against.  Follows pattern attribute
+ * semantics; i.e. regex must match entire Control value.
+ *
+ * ### Example
+ *
+ * ```
+ * <input [name]="fullName" pattern="[a-zA-Z ]*" ngModel>
+ * ```
+ * @stable
+ */
+export var PatternValidator = (function () {
+    function PatternValidator() {
     }
-    PatternValidator.prototype.validate = function (c) { return this._validator(c); };
-    /** @nocollapse */
+    PatternValidator.prototype._createValidator = function () { this._validator = Validators.pattern(this.pattern); };
+    PatternValidator.prototype.ngOnChanges = function (changes) {
+        if (changes['pattern']) {
+            this._createValidator();
+            if (this._onChange)
+                this._onChange();
+        }
+    };
+    PatternValidator.prototype.validate = function (c) {
+        return isPresent(this.pattern) ? this._validator(c) : null;
+    };
+    PatternValidator.prototype.registerOnChange = function (fn) { this._onChange = fn; };
     PatternValidator.decorators = [
-        { type: core_1.Directive, args: [{
+        { type: Directive, args: [{
                     selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]',
-                    providers: [exports.PATTERN_VALIDATOR]
+                    providers: [PATTERN_VALIDATOR],
+                    host: { '[attr.pattern]': 'pattern? pattern : null' }
                 },] },
     ];
     /** @nocollapse */
-    PatternValidator.ctorParameters = [
-        { type: undefined, decorators: [{ type: core_1.Attribute, args: ['pattern',] },] },
-    ];
+    PatternValidator.ctorParameters = [];
+    PatternValidator.propDecorators = {
+        'pattern': [{ type: Input },],
+    };
     return PatternValidator;
 }());
-exports.PatternValidator = PatternValidator;
 //# sourceMappingURL=validators.js.map

src/directives/validators.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"REQUIRED":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"../validators","name":"Validators"},"member":"required"},"REQUIRED_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useValue":{"__symbolic":"reference","name":"REQUIRED"},"multi":true},"RequiredValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[required][formControlName],[required][formControl],[required][ngModel]","providers":[{"__symbolic":"reference","name":"REQUIRED_VALIDATOR"}]}]}]},"MIN_LENGTH_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MinLengthValidator"},"multi":true},"MinLengthValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[minlength][formControlName],[minlength][formControl],[minlength][ngModel]","providers":[{"__symbolic":"reference","name":"MIN_LENGTH_VALIDATOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["minlength"]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"validate":[{"__symbolic":"method"}]}},"MAX_LENGTH_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MaxLengthValidator"},"multi":true},"MaxLengthValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]","providers":[{"__symbolic":"reference","name":"MAX_LENGTH_VALIDATOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["maxlength"]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"validate":[{"__symbolic":"method"}]}},"PATTERN_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"PatternValidator"},"multi":true},"PatternValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[pattern][formControlName],[pattern][formControl],[pattern][ngModel]","providers":[{"__symbolic":"reference","name":"PATTERN_VALIDATOR"}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Attribute"},"arguments":["pattern"]}]],"parameters":[{"__symbolic":"reference","name":"string"}]}],"validate":[{"__symbolic":"method"}]}}}}
+{"__symbolic":"module","version":1,"metadata":{"REQUIRED_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"RequiredValidator"},"multi":true},"RequiredValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[required][formControlName],[required][formControl],[required][ngModel]","providers":[{"__symbolic":"reference","name":"REQUIRED_VALIDATOR"}],"host":{"[attr.required]":"required? \"\" : null"}}]}],"members":{"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"validate":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}]}},"MIN_LENGTH_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MinLengthValidator"},"multi":true},"MinLengthValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[minlength][formControlName],[minlength][formControl],[minlength][ngModel]","providers":[{"__symbolic":"reference","name":"MIN_LENGTH_VALIDATOR"}],"host":{"[attr.minlength]":"minlength? minlength : null"}}]}],"members":{"minlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_createValidator":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}]}},"MAX_LENGTH_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"MaxLengthValidator"},"multi":true},"MaxLengthValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]","providers":[{"__symbolic":"reference","name":"MAX_LENGTH_VALIDATOR"}],"host":{"[attr.maxlength]":"maxlength? maxlength : null"}}]}],"members":{"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_createValidator":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}]}},"PATTERN_VALIDATOR":{"provide":{"__symbolic":"reference","module":"../validators","name":"NG_VALIDATORS"},"useExisting":{"__symbolic":"reference","name":"PatternValidator"},"multi":true},"PatternValidator":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[pattern][formControlName],[pattern][formControl],[pattern][ngModel]","providers":[{"__symbolic":"reference","name":"PATTERN_VALIDATOR"}],"host":{"[attr.pattern]":"pattern? pattern : null"}}]}],"members":{"pattern":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"_createValidator":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"validate":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}]}}}}

src/facade/async.d.ts

@@ -66,7 +66,3 @@ /**
     emit(value?: T): void;
-    /**
-     * @deprecated - use .emit(value) instead
-     */
-    next(value: any): void;
     subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
 }

src/facade/async.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,7 +14,5 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var Subject_1 = require('rxjs/Subject');
-var Observable_1 = require('rxjs/Observable');
-exports.Observable = Observable_1.Observable;
-var Subject_2 = require('rxjs/Subject');
-exports.Subject = Subject_2.Subject;
+import { Subject } from 'rxjs/Subject';
+export { Observable } from 'rxjs/Observable';
+export { Subject } from 'rxjs/Subject';
 /**
@@ -68,3 +65,3 @@ * Use by directives and components to emit custom Events.
  */
-var EventEmitter = (function (_super) {
+export var EventEmitter = (function (_super) {
     __extends(EventEmitter, _super);
@@ -81,6 +78,2 @@ /**
     EventEmitter.prototype.emit = function (value) { _super.prototype.next.call(this, value); };
-    /**
-     * @deprecated - use .emit(value) instead
-     */
-    EventEmitter.prototype.next = function (value) { _super.prototype.next.call(this, value); };
     EventEmitter.prototype.subscribe = function (generatorOrNext, error, complete) {
@@ -119,4 +112,3 @@ var schedulerFn;
     return EventEmitter;
-}(Subject_1.Subject));
-exports.EventEmitter = EventEmitter;
+}(Subject));
 //# sourceMappingURL=async.js.map

src/facade/collection.d.ts

@@ -0,1 +1,2 @@
+
 export declare var Map: MapConstructor;
@@ -2,0 +3,0 @@ export declare var Set: SetConstructor;

src/facade/collection.js

@@ -8,6 +8,5 @@ /**
  */
-"use strict";
-var lang_1 = require('./lang');
-exports.Map = lang_1.global.Map;
-exports.Set = lang_1.global.Set;
+import { getSymbolIterator, global, isArray, isBlank, isJsObject, isPresent } from './lang';
+export var Map = global.Map;
+export var Set = global.Set;
 // Safari and Internet Explorer do not support the iterable parameter to the
@@ -17,4 +16,4 @@ // Map constructor.  We work around that by manually adding the items.
     try {
-        if (new exports.Map([[1, 2]]).size === 1) {
-            return function createMapFromPairs(pairs) { return new exports.Map(pairs); };
+        if (new Map([[1, 2]]).size === 1) {
+            return function createMapFromPairs(pairs) { return new Map(pairs); };
         }
@@ -25,3 +24,3 @@ }
     return function createMapAndPopulateFromPairs(pairs) {
-        var map = new exports.Map();
+        var map = new Map();
         for (var i = 0; i < pairs.length; i++) {
@@ -36,4 +35,4 @@ var pair = pairs[i];
     try {
-        if (new exports.Map(new exports.Map())) {
-            return function createMapFromMap(m) { return new exports.Map(m); };
+        if (new Map(new Map())) {
+            return function createMapFromMap(m) { return new Map(m); };
         }
@@ -44,3 +43,3 @@ }
     return function createMapAndPopulateFromMap(m) {
-        var map = new exports.Map();
+        var map = new Map();
         m.forEach(function (v, k) { map.set(k, v); });
@@ -51,3 +50,3 @@ return map;
 var _clearValues = (function () {
-    if ((new exports.Map()).keys().next) {
+    if ((new Map()).keys().next) {
         return function _clearValues(m) {
@@ -71,3 +70,3 @@ var keyIterator = m.keys();
     try {
-        if ((new exports.Map()).values().next) {
+        if ((new Map()).values().next) {
             return function createArrayFromMap(m, getValues) {
@@ -89,3 +88,3 @@ return getValues ? Array.from(m.values()) : Array.from(m.keys());
 })();
-var MapWrapper = (function () {
+export var MapWrapper = (function () {
     function MapWrapper() {
@@ -95,3 +94,3 @@ }
     MapWrapper.createFromStringMap = function (stringMap) {
-        var result = new exports.Map();
+        var result = new Map();
         for (var prop in stringMap) {
@@ -114,7 +113,6 @@ result.set(prop, stringMap[prop]);
 }());
-exports.MapWrapper = MapWrapper;
 /**
  * Wraps Javascript Objects
  */
-var StringMapWrapper = (function () {
+export var StringMapWrapper = (function () {
     function StringMapWrapper() {
@@ -181,4 +179,3 @@ }
 }());
-exports.StringMapWrapper = StringMapWrapper;
-var ListWrapper = (function () {
+export var ListWrapper = (function () {
     function ListWrapper() {
@@ -259,3 +256,3 @@ }
     ListWrapper.sort = function (l, compareFn) {
-        if (lang_1.isPresent(compareFn)) {
+        if (isPresent(compareFn)) {
             l.sort(compareFn);
@@ -277,3 +274,3 @@ }
             var candidate = list[index];
-            if (lang_1.isBlank(candidate)) {
+            if (isBlank(candidate)) {
                 continue;
@@ -301,8 +298,7 @@ }
 }());
-exports.ListWrapper = ListWrapper;
 function _flattenArray(source, target) {
-    if (lang_1.isPresent(source)) {
+    if (isPresent(source)) {
         for (var i = 0; i < source.length; i++) {
             var item = source[i];
-            if (lang_1.isArray(item)) {
+            if (isArray(item)) {
                 _flattenArray(item, target);
@@ -317,13 +313,12 @@ }
 }
-function isListLikeIterable(obj) {
-    if (!lang_1.isJsObject(obj))
+export function isListLikeIterable(obj) {
+    if (!isJsObject(obj))
         return false;
-    return lang_1.isArray(obj) ||
-        (!(obj instanceof exports.Map) &&
-            lang_1.getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
+    return isArray(obj) ||
+        (!(obj instanceof Map) &&
+            getSymbolIterator() in obj); // JS Iterable have a Symbol.iterator prop
 }
-exports.isListLikeIterable = isListLikeIterable;
-function areIterablesEqual(a, b, comparator) {
-    var iterator1 = a[lang_1.getSymbolIterator()]();
-    var iterator2 = b[lang_1.getSymbolIterator()]();
+export function areIterablesEqual(a, b, comparator) {
+    var iterator1 = a[getSymbolIterator()]();
+    var iterator2 = b[getSymbolIterator()]();
     while (true) {
@@ -340,5 +335,4 @@ var item1 = iterator1.next();
 }
-exports.areIterablesEqual = areIterablesEqual;
-function iterateListLike(obj, fn) {
-    if (lang_1.isArray(obj)) {
+export function iterateListLike(obj, fn) {
+    if (isArray(obj)) {
         for (var i = 0; i < obj.length; i++) {
@@ -349,3 +343,3 @@ fn(obj[i]);
     else {
-        var iterator = obj[lang_1.getSymbolIterator()]();
+        var iterator = obj[getSymbolIterator()]();
         var item;
@@ -357,13 +351,12 @@ while (!((item = iterator.next()).done)) {
 }
-exports.iterateListLike = iterateListLike;
 // Safari and Internet Explorer do not support the iterable parameter to the
 // Set constructor.  We work around that by manually adding the items.
 var createSetFromList = (function () {
-    var test = new exports.Set([1, 2, 3]);
+    var test = new Set([1, 2, 3]);
     if (test.size === 3) {
-        return function createSetFromList(lst) { return new exports.Set(lst); };
+        return function createSetFromList(lst) { return new Set(lst); };
     }
     else {
         return function createSetAndPopulateFromList(lst) {
-            var res = new exports.Set(lst);
+            var res = new Set(lst);
             if (res.size !== lst.length) {
@@ -378,3 +371,3 @@ for (var i = 0; i < lst.length; i++) {
 })();
-var SetWrapper = (function () {
+export var SetWrapper = (function () {
     function SetWrapper() {
@@ -387,3 +380,2 @@ }
 }());
-exports.SetWrapper = SetWrapper;
 //# sourceMappingURL=collection.js.map

src/facade/lang.d.ts

@@ -0,1 +1,2 @@
+
 /**
@@ -32,20 +33,3 @@ * @license
 export { _global as global };
-/**
- * Runtime representation a type that a Component or other object is instances of.
- *
- * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
- * the `MyCustomComponent` constructor function.
- *
- * @stable
- */
-export declare var Type: FunctionConstructor;
-export interface Type extends Function {
-}
-/**
- * Runtime representation of a type that is constructable (non-abstract).
- */
-export interface ConcreteType<T> extends Type {
-    new (...args: any[]): T;
-}
-export declare function getTypeNameForDebugging(type: Type): string;
+export declare function getTypeNameForDebugging(type: any): string;
 export declare var Math: any;
@@ -57,3 +41,3 @@ export declare var Date: DateConstructor;
 export declare function isNumber(obj: any): boolean;
-export declare function isString(obj: any): obj is String;
+export declare function isString(obj: any): obj is string;
 export declare function isFunction(obj: any): boolean;
@@ -91,8 +75,2 @@ export declare function isType(obj: any): boolean;
 }
-export declare class NumberParseError extends Error {
-    message: string;
-    name: string;
-    constructor(message: string);
-    toString(): string;
-}
 export declare class NumberWrapper {
@@ -139,4 +117,4 @@ static toFixed(n: number, fractionDigits: number): string;
 export declare function isPrimitive(obj: any): boolean;
-export declare function hasConstructor(value: Object, type: Type): boolean;
+export declare function hasConstructor(value: Object, type: any): boolean;
 export declare function escape(s: string): string;
 export declare function escapeRegExp(s: string): string;

src/facade/lang.js

@@ -8,8 +8,2 @@ /**
  */
-"use strict";
-var __extends = (this && this.__extends) || function (d, b) {
-    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-};
 var globalScope;
@@ -28,20 +22,10 @@ if (typeof window === 'undefined') {
 }
-function scheduleMicroTask(fn) {
+export function scheduleMicroTask(fn) {
     Zone.current.scheduleMicroTask('scheduleMicrotask', fn);
 }
-exports.scheduleMicroTask = scheduleMicroTask;
 // Need to declare a new variable for global here since TypeScript
 // exports the original value of the symbol.
 var _global = globalScope;
-exports.global = _global;
-/**
- * Runtime representation a type that a Component or other object is instances of.
- *
- * An example of a `Type` is `MyCustomComponent` class, which in JavaScript is be represented by
- * the `MyCustomComponent` constructor function.
- *
- * @stable
- */
-exports.Type = Function;
-function getTypeNameForDebugging(type) {
+export { _global as global };
+export function getTypeNameForDebugging(type) {
     if (type['name']) {
@@ -52,5 +36,4 @@ return type['name'];
 }
-exports.getTypeNameForDebugging = getTypeNameForDebugging;
-exports.Math = _global.Math;
-exports.Date = _global.Date;
+export var Math = _global.Math;
+export var Date = _global.Date;
 // TODO: remove calls to assert in production environment
@@ -62,40 +45,31 @@ // Note: Can't just export this and import in in other files
 };
-function isPresent(obj) {
+export function isPresent(obj) {
     return obj !== undefined && obj !== null;
 }
-exports.isPresent = isPresent;
-function isBlank(obj) {
+export function isBlank(obj) {
     return obj === undefined || obj === null;
 }
-exports.isBlank = isBlank;
-function isBoolean(obj) {
+export function isBoolean(obj) {
     return typeof obj === 'boolean';
 }
-exports.isBoolean = isBoolean;
-function isNumber(obj) {
+export function isNumber(obj) {
     return typeof obj === 'number';
 }
-exports.isNumber = isNumber;
-function isString(obj) {
+export function isString(obj) {
     return typeof obj === 'string';
 }
-exports.isString = isString;
-function isFunction(obj) {
+export function isFunction(obj) {
     return typeof obj === 'function';
 }
-exports.isFunction = isFunction;
-function isType(obj) {
+export function isType(obj) {
     return isFunction(obj);
 }
-exports.isType = isType;
-function isStringMap(obj) {
+export function isStringMap(obj) {
     return typeof obj === 'object' && obj !== null;
 }
-exports.isStringMap = isStringMap;
 var STRING_MAP_PROTO = Object.getPrototypeOf({});
-function isStrictStringMap(obj) {
+export function isStrictStringMap(obj) {
     return isStringMap(obj) && Object.getPrototypeOf(obj) === STRING_MAP_PROTO;
 }
-exports.isStrictStringMap = isStrictStringMap;
-function isPromise(obj) {
+export function isPromise(obj) {
     // allow any Promise/A+ compliant thenable.
@@ -105,14 +79,10 @@ // It's up to the caller to ensure that obj.then conforms to the spec
 }
-exports.isPromise = isPromise;
-function isArray(obj) {
+export function isArray(obj) {
     return Array.isArray(obj);
 }
-exports.isArray = isArray;
-function isDate(obj) {
-    return obj instanceof exports.Date && !isNaN(obj.valueOf());
+export function isDate(obj) {
+    return obj instanceof Date && !isNaN(obj.valueOf());
 }
-exports.isDate = isDate;
-function noop() { }
-exports.noop = noop;
-function stringify(token) {
+export function noop() { }
+export function stringify(token) {
     if (typeof token === 'string') {
@@ -134,18 +104,14 @@ return token;
 }
-exports.stringify = stringify;
 // serialize / deserialize enum exist only for consistency with dart API
 // enums in typescript don't need to be serialized
-function serializeEnum(val) {
+export function serializeEnum(val) {
     return val;
 }
-exports.serializeEnum = serializeEnum;
-function deserializeEnum(val, values) {
+export function deserializeEnum(val, values) {
     return val;
 }
-exports.deserializeEnum = deserializeEnum;
-function resolveEnumToken(enumValue, val) {
+export function resolveEnumToken(enumValue, val) {
     return enumValue[val];
 }
-exports.resolveEnumToken = resolveEnumToken;
-var StringWrapper = (function () {
+export var StringWrapper = (function () {
     function StringWrapper() {
@@ -218,4 +184,3 @@ }
 }());
-exports.StringWrapper = StringWrapper;
-var StringJoiner = (function () {
+export var StringJoiner = (function () {
     function StringJoiner(parts) {
@@ -229,14 +194,3 @@ if (parts === void 0) { parts = []; }
 }());
-exports.StringJoiner = StringJoiner;
-var NumberParseError = (function (_super) {
-    __extends(NumberParseError, _super);
-    function NumberParseError(message) {
-        _super.call(this);
-        this.message = message;
-    }
-    NumberParseError.prototype.toString = function () { return this.message; };
-    return NumberParseError;
-}(Error));
-exports.NumberParseError = NumberParseError;
-var NumberWrapper = (function () {
+export var NumberWrapper = (function () {
     function NumberWrapper() {
@@ -249,3 +203,3 @@ }
         if (isNaN(result)) {
-            throw new NumberParseError('Invalid integer literal when parsing ' + text);
+            throw new Error('Invalid integer literal when parsing ' + text);
         }
@@ -271,3 +225,3 @@ return result;
         }
-        throw new NumberParseError('Invalid integer literal when parsing ' + text + ' in base ' + radix);
+        throw new Error('Invalid integer literal when parsing ' + text + ' in base ' + radix);
     };
@@ -286,5 +240,4 @@ // TODO: NaN is a valid literal but is returned by parseFloat to indicate an error.
 }());
-exports.NumberWrapper = NumberWrapper;
-exports.RegExp = _global.RegExp;
-var FunctionWrapper = (function () {
+export var RegExp = _global.RegExp;
+export var FunctionWrapper = (function () {
     function FunctionWrapper() {
@@ -296,36 +249,28 @@ }
 }());
-exports.FunctionWrapper = FunctionWrapper;
 // JS has NaN !== NaN
-function looseIdentical(a, b) {
+export function looseIdentical(a, b) {
     return a === b || typeof a === 'number' && typeof b === 'number' && isNaN(a) && isNaN(b);
 }
-exports.looseIdentical = looseIdentical;
 // JS considers NaN is the same as NaN for map Key (while NaN !== NaN otherwise)
 // see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
-function getMapKey(value) {
+export function getMapKey(value) {
     return value;
 }
-exports.getMapKey = getMapKey;
-function normalizeBlank(obj) {
+export function normalizeBlank(obj) {
     return isBlank(obj) ? null : obj;
 }
-exports.normalizeBlank = normalizeBlank;
-function normalizeBool(obj) {
+export function normalizeBool(obj) {
     return isBlank(obj) ? false : obj;
 }
-exports.normalizeBool = normalizeBool;
-function isJsObject(o) {
+export function isJsObject(o) {
     return o !== null && (typeof o === 'function' || typeof o === 'object');
 }
-exports.isJsObject = isJsObject;
-function print(obj) {
+export function print(obj) {
     console.log(obj);
 }
-exports.print = print;
-function warn(obj) {
+export function warn(obj) {
     console.warn(obj);
 }
-exports.warn = warn;
 // Can't be all uppercase as our transpiler would think it is a special directive...
-var Json = (function () {
+export var Json = (function () {
     function Json() {
@@ -340,4 +285,3 @@ }
 }());
-exports.Json = Json;
-var DateWrapper = (function () {
+export var DateWrapper = (function () {
     function DateWrapper() {
@@ -352,13 +296,12 @@ }
         if (milliseconds === void 0) { milliseconds = 0; }
-        return new exports.Date(year, month - 1, day, hour, minutes, seconds, milliseconds);
+        return new Date(year, month - 1, day, hour, minutes, seconds, milliseconds);
     };
-    DateWrapper.fromISOString = function (str) { return new exports.Date(str); };
-    DateWrapper.fromMillis = function (ms) { return new exports.Date(ms); };
+    DateWrapper.fromISOString = function (str) { return new Date(str); };
+    DateWrapper.fromMillis = function (ms) { return new Date(ms); };
     DateWrapper.toMillis = function (date) { return date.getTime(); };
-    DateWrapper.now = function () { return new exports.Date(); };
+    DateWrapper.now = function () { return new Date(); };
     DateWrapper.toJson = function (date) { return date.toJSON(); };
     return DateWrapper;
 }());
-exports.DateWrapper = DateWrapper;
-function setValueOnPath(global, path, value) {
+export function setValueOnPath(global, path, value) {
     var parts = path.split('.');
@@ -380,5 +323,4 @@ var obj = global;
 }
-exports.setValueOnPath = setValueOnPath;
 var _symbolIterator = null;
-function getSymbolIterator() {
+export function getSymbolIterator() {
     if (isBlank(_symbolIterator)) {
@@ -402,4 +344,3 @@ if (isPresent(globalScope.Symbol) && isPresent(Symbol.iterator)) {
 }
-exports.getSymbolIterator = getSymbolIterator;
-function evalExpression(sourceUrl, expr, declarations, vars) {
+export function evalExpression(sourceUrl, expr, declarations, vars) {
     var fnBody = declarations + "\nreturn " + expr + "\n//# sourceURL=" + sourceUrl;
@@ -414,19 +355,14 @@ var fnArgNames = [];
 }
-exports.evalExpression = evalExpression;
-function isPrimitive(obj) {
+export function isPrimitive(obj) {
     return !isJsObject(obj);
 }
-exports.isPrimitive = isPrimitive;
-function hasConstructor(value, type) {
+export function hasConstructor(value, type) {
     return value.constructor === type;
 }
-exports.hasConstructor = hasConstructor;
-function escape(s) {
+export function escape(s) {
     return _global.encodeURI(s);
 }
-exports.escape = escape;
-function escapeRegExp(s) {
+export function escapeRegExp(s) {
     return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
 }
-exports.escapeRegExp = escapeRegExp;
 //# sourceMappingURL=lang.js.map

src/facade/lang.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"Type":{"__symbolic":"reference","name":"Function"},"Math":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":3,"context":{"name":"_global"}},"Date":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":3,"context":{"name":"_global"}},"isPresent":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"undefined"}},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isBlank":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"undefined"}},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isBoolean":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":104,"character":8},"right":"boolean"}},"isNumber":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":108,"character":8},"right":"number"}},"isString":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":112,"character":8},"right":"string"}},"isFunction":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":116,"character":8},"right":"function"}},"isType":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isFunction"},"arguments":[{"__symbolic":"reference","name":"obj"}]}},"isStringMap":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":124,"character":8},"right":"object"},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isStrictStringMap":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isStringMap"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"getPrototypeOf"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"error","message":"Reference to a local symbol","line":127,"character":5,"context":{"name":"STRING_MAP_PROTO"}}}}},"isPromise":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isFunction"},"arguments":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"then"}]}}},"isArray":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Array"},"member":"isArray"},"arguments":[{"__symbolic":"reference","name":"obj"}]}},"isDate":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"instanceof","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"Date"}},"right":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"valueOf"}}]}}}},"serializeEnum":{"__symbolic":"function","parameters":["val"],"value":{"__symbolic":"reference","name":"val"}},"deserializeEnum":{"__symbolic":"function","parameters":["val","values"],"value":{"__symbolic":"reference","name":"val"}},"resolveEnumToken":{"__symbolic":"function","parameters":["enumValue","val"],"value":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"enumValue"},"index":{"__symbolic":"reference","name":"val"}}},"RegExp":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":3,"context":{"name":"_global"}},"looseIdentical":{"__symbolic":"function","parameters":["a","b"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"a"},"right":{"__symbolic":"reference","name":"b"}},"right":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":322,"character":19},"right":"number"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":322,"character":44},"right":"number"}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"reference","name":"a"}]}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"reference","name":"b"}]}}}},"getMapKey":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"reference","name":"value"}},"normalizeBlank":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isBlank"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"thenExpression":null,"elseExpression":{"__symbolic":"reference","name":"obj"}}},"normalizeBool":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isBlank"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"thenExpression":false,"elseExpression":{"__symbolic":"reference","name":"obj"}}},"isJsObject":{"__symbolic":"function","parameters":["o"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"o"},"right":null},"right":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":340,"character":24},"right":"function"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":340,"character":50},"right":"object"}}}},"isPrimitive":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isJsObject"},"arguments":[{"__symbolic":"reference","name":"obj"}]}}},"hasConstructor":{"__symbolic":"function","parameters":["value","type"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"constructor"},"right":{"__symbolic":"reference","name":"type"}}},"escape":{"__symbolic":"function","parameters":["s"],"value":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":3,"context":{"name":"_global"}}},"escapeRegExp":{"__symbolic":"function","parameters":["s"],"value":{"__symbolic":"error","message":"Expression form not supported","line":437,"character":19}}}}
+{"__symbolic":"module","version":1,"metadata":{"Math":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":4,"context":{"name":"_global"}},"Date":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":4,"context":{"name":"_global"}},"isPresent":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"undefined"}},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isBlank":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"undefined"}},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isBoolean":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":87,"character":9},"right":"boolean"}},"isNumber":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":91,"character":9},"right":"number"}},"isString":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":95,"character":9},"right":"string"}},"isFunction":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":99,"character":9},"right":"function"}},"isType":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isFunction"},"arguments":[{"__symbolic":"reference","name":"obj"}]}},"isStringMap":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":107,"character":9},"right":"object"},"right":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"obj"},"right":null}}},"isStrictStringMap":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isStringMap"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"getPrototypeOf"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Object"},"member":"getPrototypeOf"},"arguments":[{}]}}}},"isPromise":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isPresent"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isFunction"},"arguments":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"then"}]}}},"isArray":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"Array"},"member":"isArray"},"arguments":[{"__symbolic":"reference","name":"obj"}]}},"isDate":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"instanceof","left":{"__symbolic":"reference","name":"obj"},"right":{"__symbolic":"reference","name":"Date"}},"right":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"obj"},"member":"valueOf"}}]}}}},"serializeEnum":{"__symbolic":"function","parameters":["val"],"value":{"__symbolic":"reference","name":"val"}},"deserializeEnum":{"__symbolic":"function","parameters":["val","values"],"value":{"__symbolic":"reference","name":"val"}},"resolveEnumToken":{"__symbolic":"function","parameters":["enumValue","val"],"value":{"__symbolic":"index","expression":{"__symbolic":"reference","name":"enumValue"},"index":{"__symbolic":"reference","name":"val"}}},"RegExp":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":4,"context":{"name":"_global"}},"looseIdentical":{"__symbolic":"function","parameters":["a","b"],"value":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"reference","name":"a"},"right":{"__symbolic":"reference","name":"b"}},"right":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":296,"character":20},"right":"number"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":296,"character":45},"right":"number"}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"reference","name":"a"}]}},"right":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isNaN"},"arguments":[{"__symbolic":"reference","name":"b"}]}}}},"getMapKey":{"__symbolic":"function","parameters":["value"],"value":{"__symbolic":"reference","name":"value"}},"normalizeBlank":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isBlank"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"thenExpression":null,"elseExpression":{"__symbolic":"reference","name":"obj"}}},"normalizeBool":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"if","condition":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isBlank"},"arguments":[{"__symbolic":"reference","name":"obj"}]},"thenExpression":false,"elseExpression":{"__symbolic":"reference","name":"obj"}}},"isJsObject":{"__symbolic":"function","parameters":["o"],"value":{"__symbolic":"binop","operator":"&&","left":{"__symbolic":"binop","operator":"!==","left":{"__symbolic":"reference","name":"o"},"right":null},"right":{"__symbolic":"binop","operator":"||","left":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":314,"character":24},"right":"function"},"right":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"error","message":"Expression form not supported","line":314,"character":51},"right":"object"}}}},"isPrimitive":{"__symbolic":"function","parameters":["obj"],"value":{"__symbolic":"pre","operator":"!","operand":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"isJsObject"},"arguments":[{"__symbolic":"reference","name":"obj"}]}}},"hasConstructor":{"__symbolic":"function","parameters":["value","type"],"value":{"__symbolic":"binop","operator":"===","left":{"__symbolic":"select","expression":{"__symbolic":"reference","name":"value"},"member":"constructor"},"right":{"__symbolic":"reference","name":"type"}}},"escape":{"__symbolic":"function","parameters":["s"],"value":{"__symbolic":"error","message":"Reference to a local symbol","line":55,"character":4,"context":{"name":"_global"}}},"escapeRegExp":{"__symbolic":"function","parameters":["s"],"value":{"__symbolic":"error","message":"Expression form not supported","line":411,"character":19}}}}

src/form_builder.d.ts

@@ -41,3 +41,3 @@ import { AsyncValidatorFn, ValidatorFn } from './directives/validators';
  *
- * @experimental
+ * @stable
  */
@@ -57,5 +57,6 @@ export declare class FormBuilder {
     /**
-     * Construct a new {@link FormControl} with the given `value`,`validator`, and `asyncValidator`.
+     * Construct a new {@link FormControl} with the given `formState`,`validator`, and
+     * `asyncValidator`.
      */
-    control(value: Object, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl;
+    control(formState: Object, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]): FormControl;
     /**
@@ -62,0 +63,0 @@ * Construct an array of {@link FormControl}s from the given `controlsConfig` array of

src/form_builder.js

@@ -8,8 +8,47 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var collection_1 = require('./facade/collection');
-var lang_1 = require('./facade/lang');
-var model_1 = require('./model');
-var FormBuilder = (function () {
+import { Injectable } from '@angular/core';
+import { StringMapWrapper } from './facade/collection';
+import { isArray, isPresent } from './facade/lang';
+import { FormArray, FormControl, FormGroup } from './model';
+/**
+ * Creates a form object from a user-specified configuration.
+ *
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <form [formGroup]="loginForm">
+ *       <p>Login <input formControlName="login"></p>
+ *       <div formGroupName="passwordRetry">
+ *         <p>Password <input type="password" formControlName="password"></p>
+ *         <p>Confirm password <input type="password" formControlName="passwordConfirmation"></p>
+ *       </div>
+ *     </form>
+ *     <h3>Form value:</h3>
+ *     <pre>{{value}}</pre>
+ *   `,
+ *   directives: [REACTIVE_FORM_DIRECTIVES]
+ * })
+ * export class App {
+ *   loginForm: FormGroup;
+ *
+ *   constructor(builder: FormBuilder) {
+ *     this.loginForm = builder.group({
+ *       login: ["", Validators.required],
+ *       passwordRetry: builder.group({
+ *         password: ["", Validators.required],
+ *         passwordConfirmation: ["", Validators.required, asyncValidator]
+ *       })
+ *     });
+ *   }
+ *
+ *   get value(): string {
+ *     return JSON.stringify(this.loginForm.value, null, 2);
+ *   }
+ * }
+ * ```
+ *
+ * @stable
+ */
+export var FormBuilder = (function () {
     function FormBuilder() {
@@ -26,14 +65,14 @@ }
         var controls = this._reduceControls(controlsConfig);
-        var optionals = (lang_1.isPresent(extra) ? collection_1.StringMapWrapper.get(extra, 'optionals') : null);
-        var validator = lang_1.isPresent(extra) ? collection_1.StringMapWrapper.get(extra, 'validator') : null;
-        var asyncValidator = lang_1.isPresent(extra) ? collection_1.StringMapWrapper.get(extra, 'asyncValidator') : null;
-        return new model_1.FormGroup(controls, optionals, validator, asyncValidator);
+        var validator = isPresent(extra) ? StringMapWrapper.get(extra, 'validator') : null;
+        var asyncValidator = isPresent(extra) ? StringMapWrapper.get(extra, 'asyncValidator') : null;
+        return new FormGroup(controls, validator, asyncValidator);
     };
     /**
-     * Construct a new {@link FormControl} with the given `value`,`validator`, and `asyncValidator`.
+     * Construct a new {@link FormControl} with the given `formState`,`validator`, and
+     * `asyncValidator`.
      */
-    FormBuilder.prototype.control = function (value, validator, asyncValidator) {
+    FormBuilder.prototype.control = function (formState, validator, asyncValidator) {
         if (validator === void 0) { validator = null; }
         if (asyncValidator === void 0) { asyncValidator = null; }
-        return new model_1.FormControl(value, validator, asyncValidator);
+        return new FormControl(formState, validator, asyncValidator);
     };
@@ -49,3 +88,3 @@ /**
         var controls = controlsConfig.map(function (c) { return _this._createControl(c); });
-        return new model_1.FormArray(controls, validator, asyncValidator);
+        return new FormArray(controls, validator, asyncValidator);
     };
@@ -56,3 +95,3 @@ /** @internal */
         var controls = {};
-        collection_1.StringMapWrapper.forEach(controlsConfig, function (controlConfig, controlName) {
+        StringMapWrapper.forEach(controlsConfig, function (controlConfig, controlName) {
             controls[controlName] = _this._createControl(controlConfig);
@@ -64,7 +103,7 @@ });
     FormBuilder.prototype._createControl = function (controlConfig) {
-        if (controlConfig instanceof model_1.FormControl || controlConfig instanceof model_1.FormGroup ||
-            controlConfig instanceof model_1.FormArray) {
+        if (controlConfig instanceof FormControl || controlConfig instanceof FormGroup ||
+            controlConfig instanceof FormArray) {
             return controlConfig;
         }
-        else if (lang_1.isArray(controlConfig)) {
+        else if (isArray(controlConfig)) {
             var value = controlConfig[0];
@@ -79,9 +118,9 @@ var validator = controlConfig.length > 1 ? controlConfig[1] : null;
     };
-    /** @nocollapse */
     FormBuilder.decorators = [
-        { type: core_1.Injectable },
+        { type: Injectable },
     ];
+    /** @nocollapse */
+    FormBuilder.ctorParameters = [];
     return FormBuilder;
 }());
-exports.FormBuilder = FormBuilder;
 //# sourceMappingURL=form_builder.js.map

src/form_providers.d.ts

 /**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-import { Type } from '@angular/core';
-/**
- * Shorthand set of providers used for building Angular forms.
- * @experimental
- */
-export declare const FORM_PROVIDERS: Type[];
-/**
- * Shorthand set of providers used for building reactive Angular forms.
- * @experimental
- */
-export declare const REACTIVE_FORM_PROVIDERS: Type[];
-/**
  * The ng module for forms.
- * @experimental
+ * @stable
  */
@@ -27,13 +9,5 @@ export declare class FormsModule {
  * The ng module for reactive forms.
- * @experimental
+ * @stable
  */
 export declare class ReactiveFormsModule {
 }
-/**
- * @deprecated
- */
-export declare function disableDeprecatedForms(): any[];
-/**
- * @deprecated
- */
-export declare function provideForms(): any[];

src/form_providers.js

@@ -8,61 +8,42 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var directives_1 = require('./directives');
-var radio_control_value_accessor_1 = require('./directives/radio_control_value_accessor');
-var form_builder_1 = require('./form_builder');
+import { NgModule } from '@angular/core';
+import { InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES } from './directives';
+import { RadioControlRegistry } from './directives/radio_control_value_accessor';
+import { FormBuilder } from './form_builder';
 /**
- * Shorthand set of providers used for building Angular forms.
- * @experimental
+ * The ng module for forms.
+ * @stable
  */
-exports.FORM_PROVIDERS = [radio_control_value_accessor_1.RadioControlRegistry];
-/**
- * Shorthand set of providers used for building reactive Angular forms.
- * @experimental
- */
-exports.REACTIVE_FORM_PROVIDERS = [form_builder_1.FormBuilder, radio_control_value_accessor_1.RadioControlRegistry];
-var FormsModule = (function () {
+export var FormsModule = (function () {
     function FormsModule() {
     }
-    /** @nocollapse */
     FormsModule.decorators = [
-        { type: core_1.NgModule, args: [{
-                    declarations: directives_1.TEMPLATE_DRIVEN_DIRECTIVES,
-                    providers: [exports.FORM_PROVIDERS],
-                    exports: [directives_1.InternalFormsSharedModule, directives_1.TEMPLATE_DRIVEN_DIRECTIVES]
+        { type: NgModule, args: [{
+                    declarations: TEMPLATE_DRIVEN_DIRECTIVES,
+                    providers: [RadioControlRegistry],
+                    exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
                 },] },
     ];
+    /** @nocollapse */
+    FormsModule.ctorParameters = [];
     return FormsModule;
 }());
-exports.FormsModule = FormsModule;
-var ReactiveFormsModule = (function () {
+/**
+ * The ng module for reactive forms.
+ * @stable
+ */
+export var ReactiveFormsModule = (function () {
     function ReactiveFormsModule() {
     }
-    /** @nocollapse */
     ReactiveFormsModule.decorators = [
-        { type: core_1.NgModule, args: [{
-                    declarations: [directives_1.REACTIVE_DRIVEN_DIRECTIVES],
-                    providers: [exports.REACTIVE_FORM_PROVIDERS],
-                    exports: [directives_1.InternalFormsSharedModule, directives_1.REACTIVE_DRIVEN_DIRECTIVES]
+        { type: NgModule, args: [{
+                    declarations: [REACTIVE_DRIVEN_DIRECTIVES],
+                    providers: [FormBuilder, RadioControlRegistry],
+                    exports: [InternalFormsSharedModule, REACTIVE_DRIVEN_DIRECTIVES]
                 },] },
     ];
+    /** @nocollapse */
+    ReactiveFormsModule.ctorParameters = [];
     return ReactiveFormsModule;
 }());
-exports.ReactiveFormsModule = ReactiveFormsModule;
-/**
- * @deprecated
- */
-function disableDeprecatedForms() {
-    return [];
-}
-exports.disableDeprecatedForms = disableDeprecatedForms;
-/**
- * @deprecated
- */
-function provideForms() {
-    return [
-        { provide: core_1.PLATFORM_DIRECTIVES, useValue: directives_1.FORM_DIRECTIVES, multi: true }, exports.REACTIVE_FORM_PROVIDERS
-    ];
-}
-exports.provideForms = provideForms;
 //# sourceMappingURL=form_providers.js.map

src/form_providers.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"FORM_PROVIDERS":[{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlRegistry"}],"REACTIVE_FORM_PROVIDERS":[{"__symbolic":"reference","module":"./form_builder","name":"FormBuilder"},{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlRegistry"}],"FormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":{"__symbolic":"reference","module":"./directives","name":"TEMPLATE_DRIVEN_DIRECTIVES"},"providers":[{"__symbolic":"reference","name":"FORM_PROVIDERS"}],"exports":[{"__symbolic":"reference","module":"./directives","name":"InternalFormsSharedModule"},{"__symbolic":"reference","module":"./directives","name":"TEMPLATE_DRIVEN_DIRECTIVES"}]}]}]},"ReactiveFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives","name":"REACTIVE_DRIVEN_DIRECTIVES"}],"providers":[{"__symbolic":"reference","name":"REACTIVE_FORM_PROVIDERS"}],"exports":[{"__symbolic":"reference","module":"./directives","name":"InternalFormsSharedModule"},{"__symbolic":"reference","module":"./directives","name":"REACTIVE_DRIVEN_DIRECTIVES"}]}]}]},"disableDeprecatedForms":{"__symbolic":"function","parameters":[],"value":[]},"provideForms":{"__symbolic":"function","parameters":[],"value":[{"provide":{"__symbolic":"reference","module":"@angular/core","name":"PLATFORM_DIRECTIVES"},"useValue":{"__symbolic":"reference","module":"./directives","name":"FORM_DIRECTIVES"},"multi":true},{"__symbolic":"reference","name":"REACTIVE_FORM_PROVIDERS"}]}}}
+{"__symbolic":"module","version":1,"metadata":{"FormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":{"__symbolic":"reference","module":"./directives","name":"TEMPLATE_DRIVEN_DIRECTIVES"},"providers":[{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlRegistry"}],"exports":[{"__symbolic":"reference","module":"./directives","name":"InternalFormsSharedModule"},{"__symbolic":"reference","module":"./directives","name":"TEMPLATE_DRIVEN_DIRECTIVES"}]}]}]},"ReactiveFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","module":"./directives","name":"REACTIVE_DRIVEN_DIRECTIVES"}],"providers":[{"__symbolic":"reference","module":"./form_builder","name":"FormBuilder"},{"__symbolic":"reference","module":"./directives/radio_control_value_accessor","name":"RadioControlRegistry"}],"exports":[{"__symbolic":"reference","module":"./directives","name":"InternalFormsSharedModule"},{"__symbolic":"reference","module":"./directives","name":"REACTIVE_DRIVEN_DIRECTIVES"}]}]}]}}}

src/forms.d.ts

@@ -21,3 +21,2 @@ /**
  */
-export { FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES } from './directives';
 export { AbstractControlDirective } from './directives/abstract_control_directive';
@@ -31,3 +30,3 @@ export { AbstractFormGroupDirective } from './directives/abstract_form_group_directive';
 export { NgControl } from './directives/ng_control';
-export { NgControlStatus } from './directives/ng_control_status';
+export { NgControlStatus, NgControlStatusGroup } from './directives/ng_control_status';
 export { NgForm } from './directives/ng_form';
@@ -34,0 +33,0 @@ export { NgModel } from './directives/ng_model';

src/forms.js

@@ -8,6 +8,2 @@ /**
  */
-"use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
 /**
@@ -26,59 +22,25 @@ * @module
  */
-var directives_1 = require('./directives');
-exports.FORM_DIRECTIVES = directives_1.FORM_DIRECTIVES;
-exports.REACTIVE_FORM_DIRECTIVES = directives_1.REACTIVE_FORM_DIRECTIVES;
-var abstract_control_directive_1 = require('./directives/abstract_control_directive');
-exports.AbstractControlDirective = abstract_control_directive_1.AbstractControlDirective;
-var abstract_form_group_directive_1 = require('./directives/abstract_form_group_directive');
-exports.AbstractFormGroupDirective = abstract_form_group_directive_1.AbstractFormGroupDirective;
-var checkbox_value_accessor_1 = require('./directives/checkbox_value_accessor');
-exports.CheckboxControlValueAccessor = checkbox_value_accessor_1.CheckboxControlValueAccessor;
-var control_container_1 = require('./directives/control_container');
-exports.ControlContainer = control_container_1.ControlContainer;
-var control_value_accessor_1 = require('./directives/control_value_accessor');
-exports.NG_VALUE_ACCESSOR = control_value_accessor_1.NG_VALUE_ACCESSOR;
-var default_value_accessor_1 = require('./directives/default_value_accessor');
-exports.DefaultValueAccessor = default_value_accessor_1.DefaultValueAccessor;
-var ng_control_1 = require('./directives/ng_control');
-exports.NgControl = ng_control_1.NgControl;
-var ng_control_status_1 = require('./directives/ng_control_status');
-exports.NgControlStatus = ng_control_status_1.NgControlStatus;
-var ng_form_1 = require('./directives/ng_form');
-exports.NgForm = ng_form_1.NgForm;
-var ng_model_1 = require('./directives/ng_model');
-exports.NgModel = ng_model_1.NgModel;
-var ng_model_group_1 = require('./directives/ng_model_group');
-exports.NgModelGroup = ng_model_group_1.NgModelGroup;
-var form_control_directive_1 = require('./directives/reactive_directives/form_control_directive');
-exports.FormControlDirective = form_control_directive_1.FormControlDirective;
-var form_control_name_1 = require('./directives/reactive_directives/form_control_name');
-exports.FormControlName = form_control_name_1.FormControlName;
-var form_group_directive_1 = require('./directives/reactive_directives/form_group_directive');
-exports.FormGroupDirective = form_group_directive_1.FormGroupDirective;
-var form_group_name_1 = require('./directives/reactive_directives/form_group_name');
-exports.FormArrayName = form_group_name_1.FormArrayName;
-var form_group_name_2 = require('./directives/reactive_directives/form_group_name');
-exports.FormGroupName = form_group_name_2.FormGroupName;
-var select_control_value_accessor_1 = require('./directives/select_control_value_accessor');
-exports.NgSelectOption = select_control_value_accessor_1.NgSelectOption;
-exports.SelectControlValueAccessor = select_control_value_accessor_1.SelectControlValueAccessor;
-var select_multiple_control_value_accessor_1 = require('./directives/select_multiple_control_value_accessor');
-exports.SelectMultipleControlValueAccessor = select_multiple_control_value_accessor_1.SelectMultipleControlValueAccessor;
-var validators_1 = require('./directives/validators');
-exports.MaxLengthValidator = validators_1.MaxLengthValidator;
-exports.MinLengthValidator = validators_1.MinLengthValidator;
-exports.PatternValidator = validators_1.PatternValidator;
-exports.RequiredValidator = validators_1.RequiredValidator;
-var form_builder_1 = require('./form_builder');
-exports.FormBuilder = form_builder_1.FormBuilder;
-var model_1 = require('./model');
-exports.AbstractControl = model_1.AbstractControl;
-exports.FormArray = model_1.FormArray;
-exports.FormControl = model_1.FormControl;
-exports.FormGroup = model_1.FormGroup;
-var validators_2 = require('./validators');
-exports.NG_ASYNC_VALIDATORS = validators_2.NG_ASYNC_VALIDATORS;
-exports.NG_VALIDATORS = validators_2.NG_VALIDATORS;
-exports.Validators = validators_2.Validators;
-__export(require('./form_providers'));
+export { AbstractControlDirective } from './directives/abstract_control_directive';
+export { AbstractFormGroupDirective } from './directives/abstract_form_group_directive';
+export { CheckboxControlValueAccessor } from './directives/checkbox_value_accessor';
+export { ControlContainer } from './directives/control_container';
+export { NG_VALUE_ACCESSOR } from './directives/control_value_accessor';
+export { DefaultValueAccessor } from './directives/default_value_accessor';
+export { NgControl } from './directives/ng_control';
+export { NgControlStatus, NgControlStatusGroup } from './directives/ng_control_status';
+export { NgForm } from './directives/ng_form';
+export { NgModel } from './directives/ng_model';
+export { NgModelGroup } from './directives/ng_model_group';
+export { FormControlDirective } from './directives/reactive_directives/form_control_directive';
+export { FormControlName } from './directives/reactive_directives/form_control_name';
+export { FormGroupDirective } from './directives/reactive_directives/form_group_directive';
+export { FormArrayName } from './directives/reactive_directives/form_group_name';
+export { FormGroupName } from './directives/reactive_directives/form_group_name';
+export { NgSelectOption, SelectControlValueAccessor } from './directives/select_control_value_accessor';
+export { SelectMultipleControlValueAccessor } from './directives/select_multiple_control_value_accessor';
+export { MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator } from './directives/validators';
+export { FormBuilder } from './form_builder';
+export { AbstractControl, FormArray, FormControl, FormGroup } from './model';
+export { NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators } from './validators';
+export * from './form_providers';
 //# sourceMappingURL=forms.js.map

src/forms.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./directives","export":["FORM_DIRECTIVES","REACTIVE_FORM_DIRECTIVES"]},{"from":"./directives/abstract_control_directive","export":["AbstractControlDirective"]},{"from":"./directives/abstract_form_group_directive","export":["AbstractFormGroupDirective"]},{"from":"./directives/checkbox_value_accessor","export":["CheckboxControlValueAccessor"]},{"from":"./directives/control_container","export":["ControlContainer"]},{"from":"./directives/control_value_accessor","export":["ControlValueAccessor","NG_VALUE_ACCESSOR"]},{"from":"./directives/default_value_accessor","export":["DefaultValueAccessor"]},{"from":"./directives/form_interface","export":["Form"]},{"from":"./directives/ng_control","export":["NgControl"]},{"from":"./directives/ng_control_status","export":["NgControlStatus"]},{"from":"./directives/ng_form","export":["NgForm"]},{"from":"./directives/ng_model","export":["NgModel"]},{"from":"./directives/ng_model_group","export":["NgModelGroup"]},{"from":"./directives/reactive_directives/form_control_directive","export":["FormControlDirective"]},{"from":"./directives/reactive_directives/form_control_name","export":["FormControlName"]},{"from":"./directives/reactive_directives/form_group_directive","export":["FormGroupDirective"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormArrayName"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormGroupName"]},{"from":"./directives/select_control_value_accessor","export":["NgSelectOption","SelectControlValueAccessor"]},{"from":"./directives/select_multiple_control_value_accessor","export":["SelectMultipleControlValueAccessor"]},{"from":"./directives/validators","export":["AsyncValidatorFn","MaxLengthValidator","MinLengthValidator","PatternValidator","RequiredValidator","Validator","ValidatorFn"]},{"from":"./form_builder","export":["FormBuilder"]},{"from":"./model","export":["AbstractControl","FormArray","FormControl","FormGroup"]},{"from":"./validators","export":["NG_ASYNC_VALIDATORS","NG_VALIDATORS","Validators"]},{"from":"./form_providers"}]}
+{"__symbolic":"module","version":1,"metadata":{},"exports":[{"from":"./directives/abstract_control_directive","export":["AbstractControlDirective"]},{"from":"./directives/abstract_form_group_directive","export":["AbstractFormGroupDirective"]},{"from":"./directives/checkbox_value_accessor","export":["CheckboxControlValueAccessor"]},{"from":"./directives/control_container","export":["ControlContainer"]},{"from":"./directives/control_value_accessor","export":["ControlValueAccessor","NG_VALUE_ACCESSOR"]},{"from":"./directives/default_value_accessor","export":["DefaultValueAccessor"]},{"from":"./directives/form_interface","export":["Form"]},{"from":"./directives/ng_control","export":["NgControl"]},{"from":"./directives/ng_control_status","export":["NgControlStatus","NgControlStatusGroup"]},{"from":"./directives/ng_form","export":["NgForm"]},{"from":"./directives/ng_model","export":["NgModel"]},{"from":"./directives/ng_model_group","export":["NgModelGroup"]},{"from":"./directives/reactive_directives/form_control_directive","export":["FormControlDirective"]},{"from":"./directives/reactive_directives/form_control_name","export":["FormControlName"]},{"from":"./directives/reactive_directives/form_group_directive","export":["FormGroupDirective"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormArrayName"]},{"from":"./directives/reactive_directives/form_group_name","export":["FormGroupName"]},{"from":"./directives/select_control_value_accessor","export":["NgSelectOption","SelectControlValueAccessor"]},{"from":"./directives/select_multiple_control_value_accessor","export":["SelectMultipleControlValueAccessor"]},{"from":"./directives/validators","export":["AsyncValidatorFn","MaxLengthValidator","MinLengthValidator","PatternValidator","RequiredValidator","Validator","ValidatorFn"]},{"from":"./form_builder","export":["FormBuilder"]},{"from":"./model","export":["AbstractControl","FormArray","FormControl","FormGroup"]},{"from":"./validators","export":["NG_ASYNC_VALIDATORS","NG_VALIDATORS","Validators"]},{"from":"./form_providers"}]}

src/model.d.ts

@@ -16,5 +16,10 @@ import { AsyncValidatorFn, ValidatorFn } from './directives/validators';
 export declare const PENDING: string;
+/**
+ * Indicates that a FormControl is disabled, i.e. that the control is exempt from ancestor
+ * calculations of validity or value.
+ */
+export declare const DISABLED: string;
 export declare function isControl(control: Object): boolean;
 /**
- * @experimental
+ * @stable
  */
@@ -50,2 +55,4 @@ export declare abstract class AbstractControl {
     pending: boolean;
+    disabled: boolean;
+    enabled: boolean;
     setAsyncValidators(newValidator: AsyncValidatorFn | AsyncValidatorFn[]): void;
@@ -70,2 +77,11 @@ clearAsyncValidators(): void;
     }): void;
+    disable({onlySelf, emitEvent}?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    enable({onlySelf, emitEvent}?: {
+        onlySelf?: boolean;
+        emitEvent?: boolean;
+    }): void;
+    private _updateAncestors(onlySelf);
     setParent(parent: FormGroup | FormArray): void;
@@ -82,2 +98,3 @@ abstract setValue(value: any, options?: Object): void;
     private _cancelExistingSubscription();
+    private _disabledChanged(originalStatus);
     /**
@@ -111,6 +128,2 @@ * Sets errors on a form control.
     }): void;
-    /**
-     * @deprecated - use get() instead
-     */
-    find(path: Array<string | number> | string): AbstractControl;
     get(path: Array<string | number> | string): AbstractControl;
@@ -138,6 +151,6 @@ getError(errorCode: string, path?: string[]): any;
  *
- * @experimental
+ * @stable
  */
 export declare class FormControl extends AbstractControl {
-    constructor(value?: any, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]);
+    constructor(formState?: any, validator?: ValidatorFn | ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]);
     /**
@@ -174,14 +187,5 @@ * Set the value of the form control to `value`.
     }): void;
-    /**
-     * @deprecated Please use setValue() instead.
-     */
-    updateValue(value: any, options?: {
+    reset(formState?: any, {onlySelf}?: {
         onlySelf?: boolean;
-        emitEvent?: boolean;
-        emitModelToViewChange?: boolean;
-        emitViewToModelChange?: boolean;
     }): void;
-    reset(value?: any, {onlySelf}?: {
-        onlySelf?: boolean;
-    }): void;
     /**
@@ -191,2 +195,7 @@ * Register a listener for change events.
     registerOnChange(fn: Function): void;
+    /**
+     * Register a listener for disabled events.
+     */
+    registerOnDisabledChange(fn: (isDisabled: boolean) => void): void;
+    private _applyFormState(formState);
 }
@@ -205,5 +214,4 @@ /**
  *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
  *
- * @experimental
+ * @stable
  */
@@ -214,7 +222,4 @@ export declare class FormGroup extends AbstractControl {
     };
-    private _optionals;
     constructor(controls: {
         [key: string]: AbstractControl;
-    }, optionals?: {
-        [key: string]: boolean;
     }, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn);
@@ -234,10 +239,2 @@ /**
     /**
-     * Mark the named control as non-optional.
-     */
-    include(controlName: string): void;
-    /**
-     * Mark the named control as optional.
-     */
-    exclude(controlName: string): void;
-    /**
      * Check whether there is a control with the given name in the group.
@@ -259,2 +256,3 @@ */
     }): void;
+    getRawValue(): Object;
 }
@@ -281,5 +279,4 @@ /**
  *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
  *
- * @experimental
+ * @stable
  */
@@ -318,2 +315,3 @@ export declare class FormArray extends AbstractControl {
     }): void;
+    getRawValue(): any[];
 }

src/model.js

@@ -8,3 +8,2 @@ /**
  */
-"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
@@ -15,16 +14,15 @@ for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
 };
-var PromiseObservable_1 = require('rxjs/observable/PromiseObservable');
-var shared_1 = require('./directives/shared');
-var async_1 = require('./facade/async');
-var collection_1 = require('./facade/collection');
-var exceptions_1 = require('./facade/exceptions');
-var lang_1 = require('./facade/lang');
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { composeAsyncValidators, composeValidators } from './directives/shared';
+import { EventEmitter } from './facade/async';
+import { ListWrapper, StringMapWrapper } from './facade/collection';
+import { isBlank, isPresent, isPromise, isStringMap, normalizeBool } from './facade/lang';
 /**
  * Indicates that a FormControl is valid, i.e. that no errors exist in the input value.
  */
-exports.VALID = 'VALID';
+export var VALID = 'VALID';
 /**
  * Indicates that a FormControl is invalid, i.e. that an error exists in the input value.
  */
-exports.INVALID = 'INVALID';
+export var INVALID = 'INVALID';
 /**
@@ -34,9 +32,13 @@ * Indicates that a FormControl is pending, i.e. that async validation is occurring and
  */
-exports.PENDING = 'PENDING';
-function isControl(control) {
+export var PENDING = 'PENDING';
+/**
+ * Indicates that a FormControl is disabled, i.e. that the control is exempt from ancestor
+ * calculations of validity or value.
+ */
+export var DISABLED = 'DISABLED';
+export function isControl(control) {
     return control instanceof AbstractControl;
 }
-exports.isControl = isControl;
 function _find(control, path, delimiter) {
-    if (lang_1.isBlank(path))
+    if (isBlank(path))
         return null;
@@ -46,11 +48,11 @@ if (!(path instanceof Array)) {
     }
-    if (path instanceof Array && collection_1.ListWrapper.isEmpty(path))
+    if (path instanceof Array && ListWrapper.isEmpty(path))
         return null;
     return path.reduce(function (v, name) {
         if (v instanceof FormGroup) {
-            return lang_1.isPresent(v.controls[name]) ? v.controls[name] : null;
+            return isPresent(v.controls[name]) ? v.controls[name] : null;
         }
         else if (v instanceof FormArray) {
             var index = name;
-            return lang_1.isPresent(v.at(index)) ? v.at(index) : null;
+            return isPresent(v.at(index)) ? v.at(index) : null;
         }
@@ -63,14 +65,14 @@ else {
 function toObservable(r) {
-    return lang_1.isPromise(r) ? PromiseObservable_1.PromiseObservable.create(r) : r;
+    return isPromise(r) ? fromPromise(r) : r;
 }
 function coerceToValidator(validator) {
-    return Array.isArray(validator) ? shared_1.composeValidators(validator) : validator;
+    return Array.isArray(validator) ? composeValidators(validator) : validator;
 }
 function coerceToAsyncValidator(asyncValidator) {
-    return Array.isArray(asyncValidator) ? shared_1.composeAsyncValidators(asyncValidator) : asyncValidator;
+    return Array.isArray(asyncValidator) ? composeAsyncValidators(asyncValidator) : asyncValidator;
 }
 /**
- * @experimental
+ * @stable
  */
-var AbstractControl = (function () {
+export var AbstractControl = (function () {
     function AbstractControl(validator, asyncValidator) {
@@ -93,3 +95,3 @@ this.validator = validator;
     Object.defineProperty(AbstractControl.prototype, "valid", {
-        get: function () { return this._status === exports.VALID; },
+        get: function () { return this._status === VALID; },
         enumerable: true,
@@ -99,3 +101,3 @@ configurable: true
     Object.defineProperty(AbstractControl.prototype, "invalid", {
-        get: function () { return this._status === exports.INVALID; },
+        get: function () { return this._status === INVALID; },
         enumerable: true,
@@ -143,6 +145,16 @@ configurable: true
     Object.defineProperty(AbstractControl.prototype, "pending", {
-        get: function () { return this._status == exports.PENDING; },
+        get: function () { return this._status == PENDING; },
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(AbstractControl.prototype, "disabled", {
+        get: function () { return this._status === DISABLED; },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(AbstractControl.prototype, "enabled", {
+        get: function () { return this._status !== DISABLED; },
+        enumerable: true,
+        configurable: true
+    });
     AbstractControl.prototype.setAsyncValidators = function (newValidator) {
@@ -158,5 +170,5 @@ this.asyncValidator = coerceToAsyncValidator(newValidator);
         var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
-        onlySelf = lang_1.normalizeBool(onlySelf);
+        onlySelf = normalizeBool(onlySelf);
         this._touched = true;
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent.markAsTouched({ onlySelf: onlySelf });
@@ -167,5 +179,5 @@ }
         var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
-        onlySelf = lang_1.normalizeBool(onlySelf);
+        onlySelf = normalizeBool(onlySelf);
         this._pristine = false;
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent.markAsDirty({ onlySelf: onlySelf });
@@ -178,3 +190,3 @@ }
         this._forEachChild(function (control) { control.markAsPristine({ onlySelf: true }); });
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent._updatePristine({ onlySelf: onlySelf });
@@ -187,3 +199,3 @@ }
         this._forEachChild(function (control) { control.markAsUntouched({ onlySelf: true }); });
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent._updateTouched({ onlySelf: onlySelf });
@@ -194,19 +206,51 @@ }
         var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
-        onlySelf = lang_1.normalizeBool(onlySelf);
-        this._status = exports.PENDING;
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        onlySelf = normalizeBool(onlySelf);
+        this._status = PENDING;
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent.markAsPending({ onlySelf: onlySelf });
         }
     };
+    AbstractControl.prototype.disable = function (_a) {
+        var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent;
+        emitEvent = isPresent(emitEvent) ? emitEvent : true;
+        this._status = DISABLED;
+        this._forEachChild(function (control) { control.disable({ onlySelf: true }); });
+        this._updateValue();
+        if (emitEvent) {
+            this._valueChanges.emit(this._value);
+            this._statusChanges.emit(this._status);
+        }
+        this._updateAncestors(onlySelf);
+        this._onDisabledChange(true);
+    };
+    AbstractControl.prototype.enable = function (_a) {
+        var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent;
+        this._status = VALID;
+        this._forEachChild(function (control) { control.enable({ onlySelf: true }); });
+        this.updateValueAndValidity({ onlySelf: true, emitEvent: emitEvent });
+        this._updateAncestors(onlySelf);
+        this._onDisabledChange(false);
+    };
+    AbstractControl.prototype._updateAncestors = function (onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
+            this._parent.updateValueAndValidity();
+            this._parent._updatePristine();
+            this._parent._updateTouched();
+        }
+    };
     AbstractControl.prototype.setParent = function (parent) { this._parent = parent; };
     AbstractControl.prototype.updateValueAndValidity = function (_a) {
         var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent;
-        onlySelf = lang_1.normalizeBool(onlySelf);
-        emitEvent = lang_1.isPresent(emitEvent) ? emitEvent : true;
+        onlySelf = normalizeBool(onlySelf);
+        emitEvent = isPresent(emitEvent) ? emitEvent : true;
         this._updateValue();
         this._errors = this._runValidator();
+        var originalStatus = this._status;
         this._status = this._calculateStatus();
-        if (this._status == exports.VALID || this._status == exports.PENDING) {
+        if (this._status == VALID || this._status == PENDING) {
             this._runAsyncValidator(emitEvent);
         }
+        if (this._disabledChanged(originalStatus)) {
+            this._updateValue();
+        }
         if (emitEvent) {
@@ -216,13 +260,19 @@ this._valueChanges.emit(this._value);
         }
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent.updateValueAndValidity({ onlySelf: onlySelf, emitEvent: emitEvent });
         }
     };
+    /** @internal */
+    AbstractControl.prototype._updateTreeValidity = function (_a) {
+        var emitEvent = (_a === void 0 ? { emitEvent: true } : _a).emitEvent;
+        this._forEachChild(function (ctrl) { return ctrl._updateTreeValidity({ emitEvent: emitEvent }); });
+        this.updateValueAndValidity({ onlySelf: true, emitEvent: emitEvent });
+    };
     AbstractControl.prototype._runValidator = function () {
-        return lang_1.isPresent(this.validator) ? this.validator(this) : null;
+        return isPresent(this.validator) ? this.validator(this) : null;
     };
     AbstractControl.prototype._runAsyncValidator = function (emitEvent) {
         var _this = this;
-        if (lang_1.isPresent(this.asyncValidator)) {
-            this._status = exports.PENDING;
+        if (isPresent(this.asyncValidator)) {
+            this._status = PENDING;
             this._cancelExistingSubscription();
@@ -234,6 +284,10 @@ var obs = toObservable(this.asyncValidator(this));
     AbstractControl.prototype._cancelExistingSubscription = function () {
-        if (lang_1.isPresent(this._asyncValidationSubscription)) {
+        if (isPresent(this._asyncValidationSubscription)) {
             this._asyncValidationSubscription.unsubscribe();
         }
     };
+    AbstractControl.prototype._disabledChanged = function (originalStatus) {
+        return this._status !== originalStatus &&
+            (this._status === DISABLED || originalStatus === DISABLED);
+    };
     /**
@@ -264,16 +318,12 @@ * Sets errors on a form control.
         var emitEvent = (_a === void 0 ? {} : _a).emitEvent;
-        emitEvent = lang_1.isPresent(emitEvent) ? emitEvent : true;
+        emitEvent = isPresent(emitEvent) ? emitEvent : true;
         this._errors = errors;
         this._updateControlsErrors(emitEvent);
     };
-    /**
-     * @deprecated - use get() instead
-     */
-    AbstractControl.prototype.find = function (path) { return _find(this, path, '/'); };
     AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };
     AbstractControl.prototype.getError = function (errorCode, path) {
         if (path === void 0) { path = null; }
-        var control = lang_1.isPresent(path) && !collection_1.ListWrapper.isEmpty(path) ? this.find(path) : this;
-        if (lang_1.isPresent(control) && lang_1.isPresent(control._errors)) {
-            return collection_1.StringMapWrapper.get(control._errors, errorCode);
+        var control = isPresent(path) && !ListWrapper.isEmpty(path) ? this.get(path) : this;
+        if (isPresent(control) && isPresent(control._errors)) {
+            return StringMapWrapper.get(control._errors, errorCode);
         }
@@ -286,3 +336,3 @@ else {
         if (path === void 0) { path = null; }
-        return lang_1.isPresent(this.getError(errorCode, path));
+        return isPresent(this.getError(errorCode, path));
     };
@@ -292,3 +342,3 @@ Object.defineProperty(AbstractControl.prototype, "root", {
             var x = this;
-            while (lang_1.isPresent(x._parent)) {
+            while (isPresent(x._parent)) {
                 x = x._parent;
@@ -307,3 +357,3 @@ }
         }
-        if (lang_1.isPresent(this._parent)) {
+        if (isPresent(this._parent)) {
             this._parent._updateControlsErrors(emitEvent);
@@ -314,13 +364,15 @@ }
     AbstractControl.prototype._initObservables = function () {
-        this._valueChanges = new async_1.EventEmitter();
-        this._statusChanges = new async_1.EventEmitter();
+        this._valueChanges = new EventEmitter();
+        this._statusChanges = new EventEmitter();
     };
     AbstractControl.prototype._calculateStatus = function () {
-        if (lang_1.isPresent(this._errors))
-            return exports.INVALID;
-        if (this._anyControlsHaveStatus(exports.PENDING))
-            return exports.PENDING;
-        if (this._anyControlsHaveStatus(exports.INVALID))
-            return exports.INVALID;
-        return exports.VALID;
+        if (isPresent(this._errors))
+            return INVALID;
+        if (this._anyControlsHaveStatus(PENDING))
+            return PENDING;
+        if (this._anyControlsHaveStatus(INVALID))
+            return INVALID;
+        if (this._allControlsDisabled())
+            return DISABLED;
+        return VALID;
     };
@@ -343,3 +395,3 @@ /** @internal */
         this._pristine = !this._anyControlsDirty();
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent._updatePristine({ onlySelf: onlySelf });
@@ -352,9 +404,15 @@ }
         this._touched = this._anyControlsTouched();
-        if (lang_1.isPresent(this._parent) && !onlySelf) {
+        if (isPresent(this._parent) && !onlySelf) {
             this._parent._updateTouched({ onlySelf: onlySelf });
         }
     };
+    /** @internal */
+    AbstractControl.prototype._onDisabledChange = function (isDisabled) { };
+    /** @internal */
+    AbstractControl.prototype._isBoxedValue = function (formState) {
+        return isStringMap(formState) && Object.keys(formState).length === 2 && 'value' in formState &&
+            'disabled' in formState;
+    };
     return AbstractControl;
 }());
-exports.AbstractControl = AbstractControl;
 /**
@@ -376,8 +434,8 @@ * Defines a part of a form that cannot be divided into other controls. `FormControl`s have values
  *
- * @experimental
+ * @stable
  */
-var FormControl = (function (_super) {
+export var FormControl = (function (_super) {
     __extends(FormControl, _super);
-    function FormControl(value, validator, asyncValidator) {
-        if (value === void 0) { value = null; }
+    function FormControl(formState, validator, asyncValidator) {
+        if (formState === void 0) { formState = null; }
         if (validator === void 0) { validator = null; }
@@ -388,3 +446,3 @@ if (asyncValidator === void 0) { asyncValidator = null; }
         this._onChange = [];
-        this._value = value;
+        this._applyFormState(formState);
         this.updateValueAndValidity({ onlySelf: true, emitEvent: false });
@@ -411,4 +469,4 @@ this._initObservables();
         var _b = _a === void 0 ? {} : _a, onlySelf = _b.onlySelf, emitEvent = _b.emitEvent, emitModelToViewChange = _b.emitModelToViewChange, emitViewToModelChange = _b.emitViewToModelChange;
-        emitModelToViewChange = lang_1.isPresent(emitModelToViewChange) ? emitModelToViewChange : true;
-        emitViewToModelChange = lang_1.isPresent(emitViewToModelChange) ? emitViewToModelChange : true;
+        emitModelToViewChange = isPresent(emitModelToViewChange) ? emitModelToViewChange : true;
+        emitViewToModelChange = isPresent(emitViewToModelChange) ? emitViewToModelChange : true;
         this._value = value;
@@ -428,15 +486,9 @@ if (this._onChange.length && emitModelToViewChange) {
     };
-    /**
-     * @deprecated Please use setValue() instead.
-     */
-    FormControl.prototype.updateValue = function (value, options) {
-        if (options === void 0) { options = {}; }
-        this.setValue(value, options);
-    };
-    FormControl.prototype.reset = function (value, _a) {
-        if (value === void 0) { value = null; }
+    FormControl.prototype.reset = function (formState, _a) {
+        if (formState === void 0) { formState = null; }
         var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
+        this._applyFormState(formState);
         this.markAsPristine({ onlySelf: onlySelf });
         this.markAsUntouched({ onlySelf: onlySelf });
-        this.setValue(value, { onlySelf: onlySelf });
+        this.setValue(this._value, { onlySelf: onlySelf });
     };
@@ -452,2 +504,6 @@ /**
     /**
+     * @internal
+     */
+    FormControl.prototype._allControlsDisabled = function () { return this.disabled; };
+    /**
      * Register a listener for change events.
@@ -459,6 +515,26 @@ */
      */
+    FormControl.prototype._clearChangeFns = function () {
+        this._onChange = [];
+        this._onDisabledChange = null;
+    };
+    /**
+     * Register a listener for disabled events.
+     */
+    FormControl.prototype.registerOnDisabledChange = function (fn) { this._onDisabledChange = fn; };
+    /**
+     * @internal
+     */
     FormControl.prototype._forEachChild = function (cb) { };
+    FormControl.prototype._applyFormState = function (formState) {
+        if (this._isBoxedValue(formState)) {
+            this._value = formState.value;
+            formState.disabled ? this.disable({ onlySelf: true, emitEvent: false }) :
+                this.enable({ onlySelf: true, emitEvent: false });
+        }
+        else {
+            this._value = formState;
+        }
+    };
     return FormControl;
 }(AbstractControl));
-exports.FormControl = FormControl;
 /**
@@ -476,10 +552,8 @@ * Defines a part of a form, of fixed length, that can contain other controls.
  *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
  *
- * @experimental
+ * @stable
  */
-var FormGroup = (function (_super) {
+export var FormGroup = (function (_super) {
     __extends(FormGroup, _super);
-    function FormGroup(controls, optionals, validator, asyncValidator) {
-        if (optionals === void 0) { optionals = null; }
+    function FormGroup(controls, validator, asyncValidator) {
         if (validator === void 0) { validator = null; }
@@ -489,3 +563,2 @@ if (asyncValidator === void 0) { asyncValidator = null; }
         this.controls = controls;
-        this._optionals = lang_1.isPresent(optionals) ? optionals : {};
         this._initObservables();
@@ -516,25 +589,11 @@ this._setParentForControls();
     FormGroup.prototype.removeControl = function (name) {
-        collection_1.StringMapWrapper.delete(this.controls, name);
+        StringMapWrapper.delete(this.controls, name);
         this.updateValueAndValidity();
     };
     /**
-     * Mark the named control as non-optional.
-     */
-    FormGroup.prototype.include = function (controlName) {
-        collection_1.StringMapWrapper.set(this._optionals, controlName, true);
-        this.updateValueAndValidity();
-    };
-    /**
-     * Mark the named control as optional.
-     */
-    FormGroup.prototype.exclude = function (controlName) {
-        collection_1.StringMapWrapper.set(this._optionals, controlName, false);
-        this.updateValueAndValidity();
-    };
-    /**
      * Check whether there is a control with the given name in the group.
      */
     FormGroup.prototype.contains = function (controlName) {
-        var c = collection_1.StringMapWrapper.contains(this.controls, controlName);
-        return c && this._included(controlName);
+        var c = StringMapWrapper.contains(this.controls, controlName);
+        return c && this.get(controlName).enabled;
     };
@@ -545,3 +604,3 @@ FormGroup.prototype.setValue = function (value, _a) {
         this._checkAllValuesPresent(value);
-        collection_1.StringMapWrapper.forEach(value, function (newValue, name) {
+        StringMapWrapper.forEach(value, function (newValue, name) {
             _this._throwIfControlMissing(name);
@@ -555,3 +614,3 @@ _this.controls[name].setValue(newValue, { onlySelf: true });
         var onlySelf = (_a === void 0 ? {} : _a).onlySelf;
-        collection_1.StringMapWrapper.forEach(value, function (newValue, name) {
+        StringMapWrapper.forEach(value, function (newValue, name) {
             if (_this.controls[name]) {
@@ -573,9 +632,15 @@ _this.controls[name].patchValue(newValue, { onlySelf: true });
     };
+    FormGroup.prototype.getRawValue = function () {
+        return this._reduceChildren({}, function (acc, control, name) {
+            acc[name] = control.value;
+            return acc;
+        });
+    };
     /** @internal */
     FormGroup.prototype._throwIfControlMissing = function (name) {
         if (!Object.keys(this.controls).length) {
-            throw new exceptions_1.BaseException("\n        There are no form controls registered with this group yet.  If you're using ngModel,\n        you may want to check next tick (e.g. use setTimeout).\n      ");
+            throw new Error("\n        There are no form controls registered with this group yet.  If you're using ngModel,\n        you may want to check next tick (e.g. use setTimeout).\n      ");
         }
         if (!this.controls[name]) {
-            throw new exceptions_1.BaseException("Cannot find form control with name: " + name + ".");
+            throw new Error("Cannot find form control with name: " + name + ".");
         }
@@ -585,3 +650,3 @@ };
     FormGroup.prototype._forEachChild = function (cb) {
-        collection_1.StringMapWrapper.forEach(this.controls, cb);
+        StringMapWrapper.forEach(this.controls, cb);
     };
@@ -606,4 +671,7 @@ /** @internal */
     FormGroup.prototype._reduceValue = function () {
+        var _this = this;
         return this._reduceChildren({}, function (acc, control, name) {
-            acc[name] = control.value;
+            if (control.enabled || _this.disabled) {
+                acc[name] = control.value;
+            }
             return acc;
@@ -614,15 +682,15 @@ });
     FormGroup.prototype._reduceChildren = function (initValue, fn) {
-        var _this = this;
         var res = initValue;
-        this._forEachChild(function (control, name) {
-            if (_this._included(name)) {
-                res = fn(res, control, name);
-            }
-        });
+        this._forEachChild(function (control, name) { res = fn(res, control, name); });
         return res;
     };
     /** @internal */
-    FormGroup.prototype._included = function (controlName) {
-        var isOptional = collection_1.StringMapWrapper.contains(this._optionals, controlName);
-        return !isOptional || collection_1.StringMapWrapper.get(this._optionals, controlName);
+    FormGroup.prototype._allControlsDisabled = function () {
+        for (var _i = 0, _a = Object.keys(this.controls); _i < _a.length; _i++) {
+            var controlName = _a[_i];
+            if (this.controls[controlName].enabled) {
+                return false;
+            }
+        }
+        return !StringMapWrapper.isEmpty(this.controls);
     };
@@ -633,3 +701,3 @@ /** @internal */
             if (value[name] === undefined) {
-                throw new exceptions_1.BaseException("Must supply a value for form control with name: '" + name + "'.");
+                throw new Error("Must supply a value for form control with name: '" + name + "'.");
             }
@@ -640,3 +708,2 @@ });
 }(AbstractControl));
-exports.FormGroup = FormGroup;
 /**
@@ -662,7 +729,6 @@ * Defines a part of a form, of variable length, that can contain other controls.
  *
- * ### Example ([live demo](http://plnkr.co/edit/23DESOpbNnBpBHZt1BR4?p=preview))
  *
- * @experimental
+ * @stable
  */
-var FormArray = (function (_super) {
+export var FormArray = (function (_super) {
     __extends(FormArray, _super);
@@ -694,3 +760,3 @@ function FormArray(controls, validator, asyncValidator) {
     FormArray.prototype.insert = function (index, control) {
-        collection_1.ListWrapper.insert(this.controls, index, control);
+        ListWrapper.insert(this.controls, index, control);
         control.setParent(this);
@@ -703,3 +769,3 @@ this.updateValueAndValidity();
     FormArray.prototype.removeAt = function (index) {
-        collection_1.ListWrapper.removeAt(this.controls, index);
+        ListWrapper.removeAt(this.controls, index);
         this.updateValueAndValidity();
@@ -745,9 +811,10 @@ };
     };
+    FormArray.prototype.getRawValue = function () { return this.controls.map(function (control) { return control.value; }); };
     /** @internal */
     FormArray.prototype._throwIfControlMissing = function (index) {
         if (!this.controls.length) {
-            throw new exceptions_1.BaseException("\n        There are no form controls registered with this array yet.  If you're using ngModel,\n        you may want to check next tick (e.g. use setTimeout).\n      ");
+            throw new Error("\n        There are no form controls registered with this array yet.  If you're using ngModel,\n        you may want to check next tick (e.g. use setTimeout).\n      ");
         }
         if (!this.at(index)) {
-            throw new exceptions_1.BaseException("Cannot find form control at index " + index);
+            throw new Error("Cannot find form control at index " + index);
         }
@@ -760,6 +827,10 @@ };
     /** @internal */
-    FormArray.prototype._updateValue = function () { this._value = this.controls.map(function (control) { return control.value; }); };
+    FormArray.prototype._updateValue = function () {
+        var _this = this;
+        this._value = this.controls.filter(function (control) { return control.enabled || _this.disabled; })
+            .map(function (control) { return control.value; });
+    };
     /** @internal */
     FormArray.prototype._anyControls = function (condition) {
-        return this.controls.some(function (control) { return condition(control); });
+        return this.controls.some(function (control) { return control.enabled && condition(control); });
     };
@@ -775,9 +846,17 @@ /** @internal */
             if (value[i] === undefined) {
-                throw new exceptions_1.BaseException("Must supply a value for form control at index: " + i + ".");
+                throw new Error("Must supply a value for form control at index: " + i + ".");
             }
         });
     };
+    /** @internal */
+    FormArray.prototype._allControlsDisabled = function () {
+        for (var _i = 0, _a = this.controls; _i < _a.length; _i++) {
+            var control = _a[_i];
+            if (control.enabled)
+                return false;
+        }
+        return !!this.controls.length;
+    };
     return FormArray;
 }(AbstractControl));
-exports.FormArray = FormArray;
 //# sourceMappingURL=model.js.map

src/model.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"VALID":"VALID","INVALID":"INVALID","PENDING":"PENDING","isControl":{"__symbolic":"function","parameters":["control"],"value":{"__symbolic":"binop","operator":"instanceof","left":{"__symbolic":"reference","name":"control"},"right":{"__symbolic":"reference","name":"AbstractControl"}}}}}
+{"__symbolic":"module","version":1,"metadata":{"VALID":"VALID","INVALID":"INVALID","PENDING":"PENDING","DISABLED":"DISABLED","isControl":{"__symbolic":"function","parameters":["control"],"value":{"__symbolic":"binop","operator":"instanceof","left":{"__symbolic":"reference","name":"control"},"right":{"__symbolic":"reference","name":"AbstractControl"}}}}}

src/validators.d.ts

@@ -19,3 +19,3 @@ /**
  * {@example core/forms/ts/ng_validators/ng_validators.ts region='ng_validators'}
- * @experimental
+ * @stable
  */
@@ -31,3 +31,3 @@ export declare const NG_VALIDATORS: OpaqueToken;
  *
- * @experimental
+ * @stable
  */
@@ -47,3 +47,3 @@ export declare const NG_ASYNC_VALIDATORS: OpaqueToken;
  *
- * @experimental
+ * @stable
  */
@@ -50,0 +50,0 @@ export declare class Validators {

src/validators.js

@@ -8,7 +8,6 @@ /**
  */
-"use strict";
-var core_1 = require('@angular/core');
-var toPromise_1 = require('rxjs/operator/toPromise');
-var collection_1 = require('./facade/collection');
-var lang_1 = require('./facade/lang');
+import { OpaqueToken } from '@angular/core';
+import { toPromise } from 'rxjs/operator/toPromise';
+import { StringMapWrapper } from './facade/collection';
+import { isBlank, isPresent, isPromise, isString } from './facade/lang';
 /**
@@ -22,5 +21,5 @@ * Providers for validators to be used for {@link FormControl}s in a form.
  * {@example core/forms/ts/ng_validators/ng_validators.ts region='ng_validators'}
- * @experimental
+ * @stable
  */
-exports.NG_VALIDATORS = new core_1.OpaqueToken('NgValidators');
+export var NG_VALIDATORS = new OpaqueToken('NgValidators');
 /**
@@ -34,5 +33,5 @@ * Providers for asynchronous validators to be used for {@link FormControl}s
  *
- * @experimental
+ * @stable
  */
-exports.NG_ASYNC_VALIDATORS = new core_1.OpaqueToken('NgAsyncValidators');
+export var NG_ASYNC_VALIDATORS = new OpaqueToken('NgAsyncValidators');
 /**
@@ -50,5 +49,5 @@ * Provides a set of validators used by form controls.
  *
- * @experimental
+ * @stable
  */
-var Validators = (function () {
+export var Validators = (function () {
     function Validators() {
@@ -60,3 +59,3 @@ }
     Validators.required = function (control) {
-        return lang_1.isBlank(control.value) || (lang_1.isString(control.value) && control.value == '') ?
+        return isBlank(control.value) || (isString(control.value) && control.value == '') ?
             { 'required': true } :
@@ -70,3 +69,3 @@ null;
         return function (control) {
-            if (lang_1.isPresent(Validators.required(control)))
+            if (isPresent(Validators.required(control)))
                 return null;
@@ -84,3 +83,3 @@ var v = control.value;
         return function (control) {
-            if (lang_1.isPresent(Validators.required(control)))
+            if (isPresent(Validators.required(control)))
                 return null;
@@ -98,3 +97,3 @@ var v = control.value;
         return function (control) {
-            if (lang_1.isPresent(Validators.required(control)))
+            if (isPresent(Validators.required(control)))
                 return null;
@@ -116,5 +115,5 @@ var regex = new RegExp("^" + pattern + "$");
     Validators.compose = function (validators) {
-        if (lang_1.isBlank(validators))
+        if (isBlank(validators))
             return null;
-        var presentValidators = validators.filter(lang_1.isPresent);
+        var presentValidators = validators.filter(isPresent);
         if (presentValidators.length == 0)
@@ -127,5 +126,5 @@ return null;
     Validators.composeAsync = function (validators) {
-        if (lang_1.isBlank(validators))
+        if (isBlank(validators))
             return null;
-        var presentValidators = validators.filter(lang_1.isPresent);
+        var presentValidators = validators.filter(isPresent);
         if (presentValidators.length == 0)
@@ -140,5 +139,4 @@ return null;
 }());
-exports.Validators = Validators;
 function _convertToPromise(obj) {
-    return lang_1.isPromise(obj) ? obj : toPromise_1.toPromise.call(obj);
+    return isPromise(obj) ? obj : toPromise.call(obj);
 }
@@ -153,6 +151,6 @@ function _executeValidators(control, validators) {
     var res = arrayOfErrors.reduce(function (res, errors) {
-        return lang_1.isPresent(errors) ? collection_1.StringMapWrapper.merge(res, errors) : res;
+        return isPresent(errors) ? StringMapWrapper.merge(res, errors) : res;
     }, {});
-    return collection_1.StringMapWrapper.isEmpty(res) ? null : res;
+    return StringMapWrapper.isEmpty(res) ? null : res;
 }
 //# sourceMappingURL=validators.js.map

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

911899

decreased by-34.15%

Number of package files

139

decreased by-52.88%

Lines of code

11663

decreased by-28.91%

No dependency changes