为什么我需要在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名称不存在.

如果我们要切换它,请在输入上放置一个name属性:

  <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在底部将始终显示有效,即使我已经提到输入本身是必需的.另外,toggle现在显示在里面$scope.test,所以我可以检查$scope.test.toggle其他地方的有效性(不需要该元素的内联属性).

如果我结合这两种方法,并同时使用name和ng-model,那么这两个结果合并,我得到的结果,我本来期望-我可以看到$scope.test.toggle 和模型本身是正确验证.

我的问题是为什么这是适当的行为？这似乎不同,比方说,jquery.validate.unobtrusive其中的name属性是本质上捆绑验证规则的元素中的位.

Answer 1

nameattribute用于角度验证,ng-model用于绑定,

如果您不打算使用角度验证,则不必使用 name

如果你没有约束力,那么就不要使用 ng-model

如果您需要在客户端验证角度和需要绑定,则两者都是必需的