Is name attribute required on form elements when using Angular?

Question

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.

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:

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?

Hocus

Answer 1

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.

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

ngModelController source

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.

FormController Source

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.

Authorize

Answer 2

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.

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.

Disrepute

Ah yes I forgot about validations. Thank you for your response – Hocus