I have set up a basic login form for my web application where users can enter their username and password. I've incorporated the standard angularjs validation to ensure that the inputs are filled out correctly.
However, I am encountering an issue where the validation error messages are displaying as soon as the page loads. I'm not quite sure why this is happening. Below is the final markup of my form:
<div ng-controller="LoginCtrl">
<form name ="loginForm" novalidate>
<div class="input-group" style="margin-left:100px;">
<input id="username" type="text" name="username" ng-model="user.name" class="form-control" placeholder="Username" required>
<span class="alert-danger" ng-show="loginForm.username.$error.required">Username is required.</span>
<input id="password "type="password" name="password" ng-model="user.password" class="form-control" placeholder="Password" required>
<span class="alert-danger" ng-show="loginForm.password.$error.required">Password is required.</span>
</div>
<input class="btn btn-lg btn-success" type="submit" id="submit" value="Login" ng-click="loginUser()" />
<pre>Username={{list}}</pre>
</form>
</div>
Has anyone encountered this issue before or have any suggestions on how to resolve it?