Validate ASP.NET Webforms with AngularJS

Question

To use AngularJS validation status I need to reference the form by its name. However the form that I have does not have a name, and I have no idea how to set a name, other than using Javascript, which I don't want to do. When I add the name attribute to the <form runat="server"> it doesn't appear in the output HTML.

Example of how it would be ideal to work:

<form name="form">
    <div ng-app="myApp" ng-controller="myCtl">
        First Name: <input type="text" name="firstName" ng-model="firstName" required><br>
        <span ng-show="form.firstName.$dirty">Dirty</span>
    </div>
</form>

A solution would be either of these two:

• Reference the form elements by ID instead of name
• Get ASP.NET webforms to output the name attribute

Answer 1

ASP.NET controls have been modified in the .NET Framework version 4.

The HtmlForm control does not render a name attribute anymore.

To disable the new rendering mode, add the following setting in the Web.config file:

  <system.web>
    <pages controlRenderingCompatibilityVersion="3.5" />
  </system.web>

Answer 2

You can add an attribute to a web forms control from the code behind using:

controlName.Attributes.Add("name","value");

<asp:TextBox ID="controlName" runat="server"/>

Or if you want to use Ids with .NET 4 you can set the attribute ClientIDMode eg

 <asp:TextBox ID="controlName" runat="server" ClientIDMode="Static"/>

then you can reference it by ID

HTH

Answer 3

use jQuery to modify the form tag

$('#form').attr('name', 'form');