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:

<

Answer 1

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.

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

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.