Question

设置ng-model后，为HTML表单字段设置名称属性是否有任何好处？

 <input ng-model="form.email" name="email"'/>

Answer 1

是的，如果您打算使用验证指令，则需要命名表单元素。在这种情况下，验证状态对象（带有错误详细信息，$ valid / $ invalid / $ touching / $ dirty / $ pristine flags）将通过表单控制器对象上相应字段的名称进行注册。

是的，你确实有好处，在大多数情况下你确实需要字段来命名。

简单验证示例：

<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-messages.js"></script>

<div ng-app="demo" ng-controller="MainController">
  <form novalidate name="userForm">
    <input type="text" name="username" ng-model="username" required minlength="5">
    <div ng-messages="userForm.username.$error" style="color:brown" role="alert">
      <div ng-message="required">Username can't be empty.</div>
      <div ng-message="minlength">Username should be at least 5 characters.</div>
    </div>
    <pre>{{ userForm.username.$error | json }}</pre>
  </form>
</div>

<script>
  angular.module('demo', ['ngMessages']).controller('MainController', function($scope) {});
</script>

Answer 2

ng-model和字段名称是2个不同的概念。 ng-model：告诉AngularJs您将使用的模型中的模型/数据 name：告诉浏览器字段的名称。表示如果您的名称也具有相同名称的ID。另一方面也是如此。

正如cgee所说，只有当您希望将来在某些时候自动化测试您的解决方案时，您才能使用名称，当您还需要设置ID时。

Answer 3

一个潜在的好处是能够Bind to the Form and Control State。如果在命名表单中命名输入，则可以访问表单本身的属性。这包括验证信息。

我看到的一个常见的事情是像这样（这是来自同一个角度文档页面）。

<form name="form" class="css-form" novalidate>
  <div>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
           min="0" max="10" integer />{{size}}<br />
    <span ng-show="form.size.$error.integer">The value is not a valid integer!</span>
    <span ng-show="form.size.$error.min 
                || form.size.$error.max">The value must be in range 0 to 10!</span>
  </div>
</form>

这利用了一些角度提供的验证（min和max指令）。然后它检查表单元素本身的实际$error对象以显示验证消息。

因此，如果您打算以这种方式与表单进行交互，那么为表单和控件命名非常重要。

我应该将'name'属性与'ng-model'并行设置吗？

3 个答案: