Issue: [$compile:multidir] Two directives [form, form] are both requesting the 'form' controller on: <form ng-form="">

Question

Issue: [$compile:multidir] Two directives [form, form] are both requesting the 'form' controller on: <form ng-form="">

I encountered an error while working on a form using 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, the form was placed within the data-ng-controller tag, but I removed it to troubleshoot any issues related to the controller.

If more code is needed, feel free to ask. I am utilizing Angular's native routing system.

javascript angularjs

Answer 1

Answer №1

These examples all point to the form directive, with minor variations in syntax:

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

Therefore, using either <div form></div> or simply <form></form> both refer to the same form directive. However, including <form form></form> would be redundant.

The ngForm directive is essentially an alias for the form directive mentioned above, and can be accessed through any of these methods:

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

In your case, you used

<form ng-form></form>

, which is equivalent to <form form></form>, hence the error message.

To learn more about different ways to reference directives, visit: http://docs.angularjs.org/guide/directive

Using the <div ng-form></div> format allows for nested forms, unlike the basic <form> tag.

Answer 2

These examples all point to the form directive, with minor variations in syntax:

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

Therefore, using either <div form></div> or simply <form></form> both refer to the same form directive. However, including <form form></form> would be redundant.

The ngForm directive is essentially an alias for the form directive mentioned above, and can be accessed through any of these methods:

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

In your case, you used

<form ng-form></form>

, which is equivalent to <form form></form>, hence the error message.

To learn more about different ways to reference directives, visit: http://docs.angularjs.org/guide/directive

Using the <div ng-form></div> format allows for nested forms, unlike the basic <form> tag.

Answer 3

Answer №2

Using either <form> or the ng-form directive is sufficient, as they are automatically interconnected. There is no need to use both simultaneously.

Answer 4

Using either <form> or the ng-form directive is sufficient, as they are automatically interconnected. There is no need to use both simultaneously.

Answer 5

Answer №3

When I decided to name my component form, I ran into the same issue.

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

Just like @user553086 mentioned in their response, changing the component's name fixed the problem.

Answer 6

When I decided to name my component form, I ran into the same issue.

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

Just like @user553086 mentioned in their response, changing the component's name fixed the problem.

Issue: [$compile:multidir] Two directives [form, form] are both requesting the 'form' controller on: <form ng-form="">

Answer №1

Answer №2

Answer №3

Similar questions

Discover the process of retrieving an image from the backend with React and Node.js

For the past 8 hours, my main focus has been on successfully transmitting a basic JSON object containing data from an API from my Express backend to a React component

The importance of utilizing an object FormData in Node.js to ensure the proper functioning of multer for file uploads via ajax with jQuery

Conceal any elements containing specific numbers in their IDs

Node.js async.series not functioning properly within Express application - response being triggered prematurely

What is the best way to manage the gradual disappearance of multiple divs belonging to the same class using jQuery?

Retrieve all users along with their respective posts, ensuring that each post is also accompanied by its corresponding comments in

What could be the reason my span is not altering color as I scroll?

Message successfully sent despite Ajax failure

Comparing Redux Presentation Components with Container Components

Tips on implementing a script injected through the JS console to update form data in an Angular webpage and ensure that the changes are successfully saved

Filter ng-repeat using OR condition for property

Mastering the art of utilizing Context API and Provider for optimal functionality

What is the process of importing a JSON data file and utilizing it within a React component?

Can you explain the function of "app.router" in the context of Express.js?

Is it possible to center an anchor link in React JS using Webpack, Sass, and Bootstrap 4?

Easily targeting elements and their descendants in jquery: What you need to know!

Testing Vue Component with Cypress revealed that the function getActivePinia was triggered without an active Pinia instance

Modifying a document by ID in Mongoose without altering a specific field

avoiding the initiation of a new ajax request while a previous one is still in progress