Search code examples
angularjscustomvalidatordynamic-html

Controller 'ng-model', required by directive 'ngModel', can't be found! in custom validation directive

I am writing a page which shows a input form which is dynamically created by the data from the database.

I am building the dynamic html & rendering it into the main page using a custom directive called "dynamic-render". It is successfully rendered.

I also have validation for the input fields in the dynamically created form. The default validations like required are working fine.

I also have custom validation directives in the dynamic form. But it is not working.

I am getting "Controller 'ng-model', required by directive 'ngModel', can't be found!" error.

I have googled & tried the solutions but none helped me.

I have created a demo in plunk. Plunk Demo

Please help me to resolve this issue. Thanks

Solution

  • You should write it with a camelCase:

    require: "ngModel"

    From directive docs:

    Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

    The normalization process is as follows:

    • Strip x- and data- from the front of the element/attributes.
    • Convert the :, -, or _-delimited name to camelCase.