使用角度时,表单元素上是否需要name属性?

时间:2022-03-01 15:59:35

I use Angular JS for all form management now. Data for inputs are stored to their associated ngModel, which can be dealt with in the $scope of the controller.

我现在在所有的表单管理中都使用了角度JS。输入的数据存储到关联的ngModel中,可以在控制器的$范围中处理。

So I have form setups like this:

我有这样的设置:

<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>

This works absolutely fine in all major browsers (except I haven't tested IE). You'll notice I haven't included name attributes on the input or textarea. Do I need them for any reason? I've read the following before:

这在所有主流浏览器中都非常适用(除了我没有测试IE)。您会注意到我没有在输入或文本区域中包含name属性。我需要它们吗?我之前读过以下内容:

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

But my data is passed absolutely fine because it's bound to the ngModel. Was is the correct method - include or not include name attributes?

但我的数据传递得非常好,因为它绑定到ngModel。正确的方法是否包括名字属性?

2 个解决方案

#1


5  

You would need name attribute on the element along with the ng-model in order for the instance to be added to the formController and any validations to happen on the control or on the form. Also if you are submitting a form (action on the form) then only the form elements with name attribute will be submitted to the server. See the native form validation and submission process.

您将需要元素上的name属性和ng模型,以便将实例添加到formController中,并在控件上或窗体上进行任何验证。另外,如果您正在提交一个表单(表单上的操作),那么只有带有name属性的表单元素将被提交给服务器。请参阅本机表单验证和提交过程。

In the ngModelController instance there is a property called $name which is nothing but the name of the element.

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

ngModelController source

ngModelController源

this.$name = $attr.name; 

And ng-model directive calls $addControl method on its parent formcontroller instance (if exists), which adds the instance as the value for a key with the name on the formController instance, if you do not have name then it wont be associated and no angular validations can happen.

ng-model指令在它的父formcontroller实例(如果存在)上调用$addControl方法,该方法将实例添加为在formcontroller实例上具有名称的键的值,如果没有名称,那么它就不会被关联,也不会发生角验证。

FormController Source

FormController源

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;
    }

So in your case you do not need to have a name if you do not rely on angular form controller validations or not submitting the form with an action.

因此,在这种情况下,如果不依赖于角形表单控制器验证或不使用动作提交表单,则不需要有名称。

#2


4  

Name attributes are not required for the functionality which you described because as you have stated, ng-model already binds the data to the controller. However, if you'd like to include validation for your form, the name attribute is necessary to link elements in relation to each other in the ui. Here's a link to the angularjs api documentation for inputs: https://docs.angularjs.org/api/ng/directive/input. at the bottom, you'll see the validation that I'm referring to.

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

To answer your question simply: No, the name attribute is not required. The only attribute required for an input in Angular is ng-Model in order to link up data to the controller.

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

#1


5  

You would need name attribute on the element along with the ng-model in order for the instance to be added to the formController and any validations to happen on the control or on the form. Also if you are submitting a form (action on the form) then only the form elements with name attribute will be submitted to the server. See the native form validation and submission process.

您将需要元素上的name属性和ng模型,以便将实例添加到formController中,并在控件上或窗体上进行任何验证。另外,如果您正在提交一个表单(表单上的操作),那么只有带有name属性的表单元素将被提交给服务器。请参阅本机表单验证和提交过程。

In the ngModelController instance there is a property called $name which is nothing but the name of the element.

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

ngModelController source

ngModelController源

this.$name = $attr.name; 

And ng-model directive calls $addControl method on its parent formcontroller instance (if exists), which adds the instance as the value for a key with the name on the formController instance, if you do not have name then it wont be associated and no angular validations can happen.

ng-model指令在它的父formcontroller实例(如果存在)上调用$addControl方法,该方法将实例添加为在formcontroller实例上具有名称的键的值,如果没有名称,那么它就不会被关联,也不会发生角验证。

FormController Source

FormController源

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;
    }

So in your case you do not need to have a name if you do not rely on angular form controller validations or not submitting the form with an action.

因此,在这种情况下,如果不依赖于角形表单控制器验证或不使用动作提交表单,则不需要有名称。

#2


4  

Name attributes are not required for the functionality which you described because as you have stated, ng-model already binds the data to the controller. However, if you'd like to include validation for your form, the name attribute is necessary to link elements in relation to each other in the ui. Here's a link to the angularjs api documentation for inputs: https://docs.angularjs.org/api/ng/directive/input. at the bottom, you'll see the validation that I'm referring to.

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

To answer your question simply: No, the name attribute is not required. The only attribute required for an input in Angular is ng-Model in order to link up data to the controller.

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