7

我现在使用 Angular JS 进行所有表单管理。输入的数据存储到它们的关联中ngModel,可以在 中$scope处理controller

所以我有这样的表单设置:

<form name="addJob" novalidate data-ng-submit="addJob.$valid && addJob(job)">
  <input type="text" placeholder="Job Title" data-ng-model="job.title" required />
  <textarea placeholder="Brief" data-ng-model="job.brief"></textarea>
  <button type="submit" data-ng-disabled="addJob.$invalid">Add Job</button>
</form>

这在所有主流浏览器中都可以正常工作(除了我没有测试过 IE)。您会注意到我没有在输入或文本区域中包含名称属性。我出于任何原因需要它们吗?我以前读过以下内容:

Note: Only form elements with a name attribute will have their values passed when submitting a form. 

但是我的数据传递得非常好,因为它绑定到ngModel. 是正确的方法 - 包括或不包括名称属性?

4

2 回答 2

6

您需要name 元素上的属性以及 ng-model 以便将实例添加到 formController 并在控件或表单上进行任何验证。此外,如果您正在提交表单(表单上的操作),那么只有具有name属性的表单元素才会提交到服务器。请参阅本机表单验证和提交过程

在 ngModelController 实例中有一个名为的属性$name,它只是元素的名称。

ngModelController 源码

this.$name = $attr.name; 

并且 ng-model 指令$addControl在其父 formcontroller 实例(如果存在)上调用方法,它将实例添加为带有nameformController 实例上的键的值,如果您没有名称,则它不会关联并且没有角度验证可以发生。

表单控制器源

form.$addControl = function(control) {
    // Breaking change - before, inputs whose name was "hasOwnProperty" were quietly ignored
    // and not added to the scope.  Now we throw an error.
    assertNotHasOwnProperty(control.$name, 'input');
    controls.push(control);

    if (control.$name) {
      form[control.$name] = control;
    }

因此,在您的情况下,name如果您不依赖角度表单控制器验证或不提交带有操作的表单,则不需要。

于 2015-01-08T21:02:08.790 回答
4

您描述的功能不需要名称属性,因为正如您所说,ng-model 已经将数据绑定到控制器。但是,如果您想对表单进行验证,那么 name 属性对于在 ui 中链接元素之间的关系是必要的。这是 angularjs api 输入文档的链接:https ://docs.angularjs.org/api/ng/directive/input 。在底部,您会看到我所指的验证。

简单地回答您的问题:不,不需要 name 属性。Angular 中输入所需的唯一属性是 ng-Model,以便将数据链接到控制器。

于 2015-01-08T20:57:31.357 回答