fix(forms): improve error message when ngFormModel is missing a form

Closes angular#8136
kara · Apr 20, 2016 · 24575e4 · 24575e4
1 parent 43e31c5
commit 24575e4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/modules/angular2/src/common/forms/directives/ng_form_model.ts b/modules/angular2/src/common/forms/directives/ng_form_model.ts
@@ -1,5 +1,6 @@
-import {CONST_EXPR} from 'angular2/src/facade/lang';
+import {CONST_EXPR, isBlank} from 'angular2/src/facade/lang';
 import {ListWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
+import {BaseException} from 'angular2/src/facade/exceptions';
 import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async';
 import {
   SimpleChange,
@@ -114,6 +115,7 @@ export class NgFormModel extends ControlContainer implements Form,
   }
 
   ngOnChanges(changes: {[key: string]: SimpleChange}): void {
+    this._checkFormPresent();
     if (StringMapWrapper.contains(changes, "form")) {
       var sync = composeValidators(this._validators);
       this.form.validator = Validators.compose([this.form.validator, sync]);
@@ -173,4 +175,11 @@ export class NgFormModel extends ControlContainer implements Form,
       dir.valueAccessor.writeValue(ctrl.value);
     });
   }
+
+  private _checkFormPresent() {
+    if (isBlank(this.form)) {
+      throw new BaseException(
+          `ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">`);
+    }
+  }
 }
diff --git a/modules/angular2/test/common/forms/integration_spec.ts b/modules/angular2/test/common/forms/integration_spec.ts
@@ -62,6 +62,19 @@ export function main() {
          });
        }));
 
+    it("should throw if a form isn't passed into ngFormModel",
+       inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
+         var t = `<div [ngFormModel]="form">
+                <input type="text" ngControl="login">
+               </div>`;
+
+         tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
+           expect(() => fixture.detectChanges())
+               .toThrowError(new RegExp(`ngFormModel expects a form. Please pass one in.`));
+           async.done();
+         });
+       }));
+
     it("should update the control group values on DOM change",
        inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
          var form = new ControlGroup({"login": new Control("oldValue")});