错误： [$compile：multidir] 多个指令 [表单、表单] 要求'form'控制器： <表单 ng-form= " " >

Question

我在 angularjs 中构建的表单上收到此错误。

'错误： [$compile：multidir] 多个指令 [表单，表单] 要求在以下位置使用"表单"控制器：

<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中拥有表单，我将其取出以查看控制器是否可能是问题所在。

请问您是否认为我需要发布更多代码，我正在使用角度本机路由系统

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答案相似。更改组件的名称可以解决问题。