AngularJS中为什么需要在输入框指定名称和ng-model？

Question

我只是在思考为什么我必须在表单中的输入元素上同时指定name和ng-model，才能正确地使用它。

例如，对于以下内容：

  <form name='test'>
      <div>
          <input type='radio' 
              value='create-new'
              ng-model='toggle'
              required />

          <input type='radio' 
              value='use-existing'
              ng-model='toggle'
              required />
      </div>
      <div ng-switch='test.$invalid'>
          <div ng-switch-when='true'>Invalid!</div>
          <div ng-switch-when='false'>Valid!</div>
      </div>
  </form>

当我不选择单选按钮时，我会得到输出Invalid! - 这是正确的行为。然而，缺点是我唯一能够访问这个模型的方式是通过$scope.toggle - 元素本身在$scope.test（表单容器）内部将无法通过名称引用。 $scope.test 将包含 toggle 的验证规则，但它将没有任何方法让您知道这些验证规则属于toggle，因为名称不存在。

如果我们把它换成在输入上放置一个名称属性：

  <form name='test'>
      <div>
          <input type='radio' 
              value='create-new'
              name='toggle'
              required />

          <input type='radio' 
              value='use-existing'
              name='toggle'
              required />
      </div>
      <div ng-switch='test.$invalid'>
          <div ng-switch-when='true'>Invalid!</div>
          <div ng-switch-when='false'>Valid!</div>
      </div>
  </form>

然后我们在底部的 ng-switch 始终会显示“Valid”，尽管我已经提到输入本身是必需的。此外，toggle 现在出现在 $scope.test 内部，因此我可以在其他地方检查 $scope.test.toggle 的有效性（而无需在该元素上需要内联属性）。

如果我结合两种方法并使用 name 和 ng-model，那么两个结果将合并，我会得到我预期的结果——我可以看到 $scope.test.toggle，并且模型本身也正确验证了。

我的问题是为什么这是适当的行为？这似乎与 jquery.validate.unobtrusive 不同，后者的 name 属性与元素的验证规则本质上是相互关联的。

- Dan

Answer 1

name 属性用于 Angular 验证，ng-model 用于数据绑定。

如果不需要使用 Angular 进行验证，就不需要使用 name。

如果不需要进行数据绑定，就不需要使用 ng-model。

如果需要在客户端使用 Angular 进行验证并进行数据绑定，则两者都是必要的。

- bto.rdz