CODEWITHSUNDEEP
angularjsformsxhtml
Aron Foster
Aron Foster

Reputation: 578

Proper way to reference a form with AngularJS while conforming to XHTML 1.1 standards?

.NET is removing the name attribute from the form element I've defined in my master page:

<form
   name="aspnetForm"
   runat="server"
   onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}"
   ng-model-options="{updateOn: 'default blur','debounce':{'default':250,'blur':0}}">

which gets rendered as:

<form
   method="post"
   action="...the current url..."
   onsubmit="javascript:return WebForm_OnSubmit();"
   id="aspnetForm"
   ng-model-options="{updateOn:'default blur','debounce':{'default':250,'blur':0}}"
   class="ng-pristine ng-invalid ng-invalid-required ng-valid-date"> == $0

From W3 and Microsoft, it seems that the name attribute is formally depreciated in XHTML 1.0 and not allowed in 1.1, and we should use the id attribute instead. However, AngularJS uses the name attribute to publish the form on the current scope. I want to check the validity of the form using AngularJS with ng-disabled="!aspnetForm.$valid" but don't see how to make $scope aware of the form. I've tried a few variations of this suggested code in my controller without success. I've also tried setting the clientidmode to static but that doesn't seem to affect the name tag.

Upvotes: 2

Views: 104

Answers (1)

Matthew Green
Matthew Green

Reputation: 10401

The scope name of the form can also be set using the attribute ng-form='aspnetForm'. You can see that in the source code for where it sets the name.

Upvotes: 1

Related Questions