Controller 'ngModel', required by directive '...', can't be found

Question

What's going on here?

Here is my directive:

app.directive('submitRequired', function (objSvc) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {

          // do something
        }
    };
});

Here is an example of the directive in use:

<input submit-required="true"></input>

Here is the actual error text:

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'submitRequired', can't be found!
http://errors.angularjs.org/1.2.2/$compile/ctreq?p0=ngModel&p1=submitRequired
    at http://www.domain.ca/Scripts/angular/angular.js:78:12
    at getControllers (http://www.domain.ca/Scripts/angular/angular.js:5972:19)
    at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6139:35)
    at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
    at nodeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:6132:24)
    at compositeLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5550:15)
    at publicLinkFn (http://www.domain.ca/Scripts/angular/angular.js:5458:30)
    at http://www.domain.ca/Scripts/angular/angular.js:1299:27
    at Scope.$get.Scope.$eval (http://www.domain.ca/Scripts/angular/angular.js:11634:28)
    at Scope.$get.Scope.$apply (http://www.domain.ca/Scripts/angular/angular.js:11734:23) <input submit-required="true"> angular.js:9159
(anonymous function) angular.js:9159
$get angular.js:6751
nodeLinkFn angular.js:6141
compositeLinkFn angular.js:5550
nodeLinkFn angular.js:6132
compositeLinkFn angular.js:5550
publicLinkFn angular.js:5458
(anonymous function) angular.js:1299
$get.Scope.$eval angular.js:11634
$get.Scope.$apply angular.js:11734
(anonymous function) angular.js:1297
invoke angular.js:3633
doBootstrap angular.js:1295
bootstrap angular.js:1309
angularInit angular.js:1258
(anonymous function) angular.js:20210
trigger angular.js:2315
(anonymous function) angular.js:2579
forEach angular.js:300
eventHandler angular.js:2578ar.js:7874

Insolvent

Does this answer your question? Controller 'ngModel', required by directive '…', can't be found – Undry

Answer 1

As described here: Angular NgModelController, you should provide the <input with the required controller ngModel

<input submit-required="true" ng-model="user.Name"></input>

Jackjackadandy

Perfect. I appreciate that! I will mark this as answer. I have a follow up question. Should I post another question or change my original? – Insolvent

Here is the follow up: #21808429 – Insolvent

i had mistakenly typed ng-models and got this error. – Trainband

@Radim Kohler I'm happy that your response actually helped someone in need,i myself am close to achieving this. From the above input statement , for the "ng-model" attribute can i use string concatenation like "{{ RootObjectName+"."+ ModelName }}" ??!! As my models in the $scope are not straightforward and are dynamically created in the controller based on input from DB – Vaporimeter

@pavankumar check this link next.plnkr.co/edit/… this ng-model="RootObject[alias]" will work if session will have ` $scope.RootObject = {}; $scope.alias = "FirstName"` ... instaead of alias, even forEach could provide the dynamic name – Montmartre

@Radim Köhler thanks for the quick response Radim,let me just check it out – Vaporimeter

@Radim Köhler i think in the plnkr the value in the scope variable is passed,what i want is to pass the model to the directive to be bound to a input element in the directive,is there a way i could do that?? – Vaporimeter

@pavankumar, look, I tried to quickly help... but it seems you need more attention. Please, create new question, ask here... you will get your answer... comments are .. not the right place, I'd say.. good luck ;) – Montmartre

@Radim Köhler i actualy did, #51966580 – Vaporimeter

The link in the answer doesn't work anymore – Bridwell

I made a custom component, the error was in the USE of the component. You MUST specify the ng-model if you expect it in your component. – Archine

Answer 2

One possible solution to this issue is ng-model attribute is required to use that directive.

Hence adding in the 'ng-model' attribute can resolve the issue.

<input submit-required="true" ng-model="user.Name"></input>

Kalk

This solved mine. Thanks. I think we have missed the point that to trigger ng-change, there should be a ng-model bind to the element. – Parenthood

Answer 3

You can also remove the line

  require: 'ngModel',

if you don't need ngModel in this directive. Removing ngModel will allow you to make a directive without thatngModel error.

Arium

Answer 4

Issue is also caused by having ng-value instead of ng-model

Error:

<input ng-value="item.name" ng-change="nameChanged()"> 

Works:

<input ng-model="item.name" ng-change="nameChanged()">

Frenum

Answer 5

I faced the same error, in my case I miss-spelled ng-model directive something like "ng-moel"

Wrong one: ng-moel="user.name" Right one: ng-model="user.name"

Cackle