使用角度时表单元素是否需要名称属性

Is name attribute required on form elements when using Angular?

本文关键字：属性 是否 元素 表单      更新时间：2023-09-26

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

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

<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。是正确的方法 - 包含或不包含名称属性？

您需要

元素上的name属性以及 ng-model，以便将实例添加到 formController 中，并在控件或窗体上进行任何验证。此外，如果您要提交表单（对表单的操作），则只有具有name属性的表单元素将提交到服务器。请参阅本机表单验证和提交过程。

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

ng模型控制器源

this.$name = $attr.name;

ng-model 指令在其父 formController 实例（如果存在）上调用$addControl方法，该方法将实例添加为键的值，并在 formController 实例上具有name，如果您没有名称，则它不会被关联，并且不会发生角度验证。

表单控制器源

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。

您描述的功能不需要名称属性，因为正如您所说，ng-model 已经将数据绑定到控制器。 但是，如果要包含表单的验证，则必须使用 name 属性来链接 UI 中彼此相关的元素。 以下是输入的angularjs api文档的链接：https://docs.angularjs.org/api/ng/directive/input。在底部，您将看到我所指的验证。

简单地回答您的问题：不，名称属性不是必需的。在 Angular 中输入所需的唯一属性是 ng-Model，以便将数据链接到控制器。

相关文章：