Swapnil VijayVargiya Swapnil VijayVargiya - 1 year ago 53
AngularJS Question

AngularJS input states not working in asp

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="Staffing_Tool.Login" %>

<!DOCTYPE html>

<head runat="server">
<script src="scripts/angular.min.js" type="text/javascript"></script>
<link href="Styles/Login.css" rel="stylesheet" />
<body data-ng-app="">
<form runat="server" name="myForm" novalidate>
<div class="circle logo">
<span></span><p>Welcome<br/>to<br/>MCBC Staffing Tool</p>
<div class="loginForm">
<h4> Login Information</h4>
<input type="text" class="text" name="userName" placeholder="Enter Username" data-ng-model="userName" required/>
<span data-ng-show="myForm.userName.$touched && myForm.userName.$invalid">Username is required.</span>
<input type="password" name="password" class="text" placeholder="Enter Password" data-ng-model="password" required/>
<span data-ng-show="myForm.password.$touched && myForm.password.$invalid">Password is required.</span>
<a href="#">Forgot your password?</a>
<asp:Button ID="btnLogin" runat="server" CssClass="btn blue animate" Text="Log in"></asp:Button>

I am new to angularJS, and above is a simple login form I have created in asp.
Everything is working fine but error span for input fields are not working.

First I thought, angularJS itself is not working so I added a h1 tag as follows after my userName field to test that:


And its showing the value typed in the field.

Then I tried following:


But it's not showing anything.

Then I tried placing the html part of my code (leaving the first line), in a simple .html file and ran it, and everything worked smoothly.

Please let me know why its not working in .aspx file.

Answer Source

Its because you are working with Asp.net Web Forms.

name attirbute is removed from Asp.net 4.0 Add following thing in System.Web Section in Web.Config

<pages controlRenderingCompatibilityVersion="3.5" />

NOte: Also set id attribute - Whatever you set id that will be set to name as well. Example in above case name will be X

Hope it works for you :)