错误：[$compile:multidir]多个指令[form，form]请求'form‘控制器：<form ng-form="">

Question

我在一个用angularjs构建的表单上遇到了这个错误。

` `Error：$compile:multidir Multiple directives，form请求' form‘控制器：

<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>

最初，我把表单放在data-ng-controller中，我把它拿出来看看是不是控制器出了问题。

如果你认为我需要发布更多的代码，请询问我，我正在使用angulars原生路由系统

Answer 1

其中的每一个或多或少都是相同的，并引用了form指令：

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

因此，您可以执行<div form></div>或简单地执行<form></form>，在这两种情况下，它们都引用相同的form指令。但<form form></form>将是多余的。

您提到的ngForm指令实际上是上面的form指令的别名，并且可以使用以下任意一种指令进行引用：

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

所以在你的例子中，你在做<form ng-form></form>，这实际上和<form form></form>是一样的，这就是为什么你会得到这个错误。

本页更详细地解释了引用指令的所有不同方法：http://docs.angularjs.org/guide/directive

顺便说一句，使用<div ng-form></div>格式的一个好处(有时)是您可以处理嵌套表单，而不能仅使用<form>标记来处理嵌套表单。

Answer 2

如果您使用的是<form>，则不需要ng-form，因为它会自动连接到ng-form指令。您可以使用或，但不能同时使用两者。

Answer 3

当我将组件名称设置为form时，我遇到了同样的问题。

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

效果类似于@user553086答案。更改组件的名称可以解决这个问题。