Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on: <form ng-form="">

Question

I am getting this error on a form I am building in angularjs.

`Error: [$compile:multidir] Multiple directives [form, form] asking for 'form' controller on:

<div data-ng-controller="shortlistController">
    <ul>
        <li data-ng-repeat="job in jobs">
            <div>{{ job.role }}</div><div>{{ job.salary }}</div><div>{{ job.company }}</div>
        </li>
    </ul>
</div>

<form ng-form>
    <input type="text" ng-model="newRole">
    <input type="text" ng-model="newSalary">
    <input type="text" ng-model="newCompany">
    <input type="text" ng-model="newUrl">
    <button>Submit</button>
</form>

Initially I had the form within data-ng-controller, I took it out to see if the controller might have been the issue..

Please ask if you think I need to post more code, I am using angulars native routing system

Answer 1

Each of these is more or less identical and refers to the form directive:

<form></form>
<div form></div>
<div x-form></div>
<div data-form></div>

So you can do either <div form></div> or simply <form></form>, and in both cases they refer to the same form directive. But <form form></form> would be redundant.

The ngForm directive which you mention is actually an alias for the form directive above, and can be referenced using any of these:

<ng-form></ng-form>
<div ng-form></div>
<div x-ng-form></div>
<div data-ng-form></div>

So in your case, you were doing <form ng-form></form>, which is really the same as <form form></form>, which is why you're getting that error.

This page explains in more detail all the different ways to reference directives: http://docs.angularjs.org/guide/directive

BTW, a benefit (sometimes) to using the <div ng-form></div> format is that you can do nested forms, whereas you can't do nested forms using just the <form> tag.

Answer 2

You don't need the ng-form if you're using <form> as it automatically is hooked up to the ng-form directive. You use either or, not both.

Answer 3

I encountered the same problem when I set my component name to form.

angular.module("testApp").component("form", {
   ...
});

Effect was the similar as in @user553086 answer. Change component's name solves the problem.