form validation not working in angular

Question

I have created an index page where i have a text area control and a click button. On clicking the button i am redirecting to a new html file where i have included form with controls. I am trying to validate the controls but it seems there is an error. i checked the console log too but no errors logged there.

My working copy here: PLUNKER DEMO

index file

    <div  style="width:1200px;visibility:hidden;margin-top:100px"></div>
      <textarea class="textarea"> Text Area. Click button to create a dashboard. </textarea>
      <input type="button" value="Click" ng-click="reDirecttoAddDashboard()" />
    </div>

    <br><br>

     <div class="view-animate-container">
      <div ng-view="" class="view-animate"></div>
    </div>



    <script src="script.js"></script>
  </body>

JS code

var app = angular.module('app', ['ngRoute']).
        config(['$routeProvider', function($routeProvider) {

            $routeProvider.when('/AddDashBoard'
                                , {templateUrl: 'AddDashboard.html'
                                  ,controller:'AddDashBoardController'});

            $routeProvider.otherwise({redirectTo: '/home'});
        }])

app.controller('LandingPageInitController', 
   ['$scope', '$log','$window', function($scope, $log,$window) {
        "use strict";

        $scope.reDirecttoAddDashboard = function()
        {
          console.log("function executed");
            $window.location = "#/AddDashBoard";
            console.log($window.location)
        }

        $log.info('Landing Page  Controller Loaded.');
        //$log.info($scope);

    }]);

 app.controller('AddDashBoardController', ['$scope', '$log', function($scope, $log) {
        "use strict";
        $scope.Test = function()
        {
            alert("Test function called");
        }

        $log.info('Add DashBoard Controller Loaded.');
        //$log.info($scope);

    }]);

AddDashboard.html

<body>

<div ng-controller="AddDashBoardController">
<table id="headerbanner" style="width:1120px;"  class="tablestyle">
        <tr>
            <td style="text-align:right; font-size: 21px;width:990px;font-weight: bold;" ng-click="displaydetails()"> Add Dashboards </td>
        </tr>
        </table>

<table>
<tr>
    <td colspan="2" style="text-align:right; font-size: 18px;width:990px;"><a href=""> Save </a></td>
    <td></td>
    <td style="text-align:right; font-size: 18px;width:130px"><a href=""> Cancel </a> </td>

</tr>   
</table>    


<form name="myForm" novalidate>
<br><br><br>

<p>Title:   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="title" ng-model="title" required>
<span style="color:red" ng-show="myForm.title.$dirty && myForm.title.$invalid">
<span ng-show="myForm.title.$error.required">Title is required.</span>
</span>
</p>

<p>Description: &nbsp;&nbsp;&nbsp;
<input type="text" name="description" ng-model="description" required>
<span style="color:red" ng-show="myForm.description.$dirty && myForm.description.$invalid">
<span ng-show="myForm.description.$error.required">Title is required.</span>
</span>
</p>

</form>

</div>

Seems to work pretty fine for me; I'm assuming the red text should appear when the user enters a value and then deletes it. What's the problem here? — Fissio
– Fissio, Commented Jul 21, 2015 at 8:11
yes. I want the red text to appear initially when the form is loaded and as and when the text is typed it should disappear. Also when user enter the title and deletes it it should work as it is now. — krishna_v
– krishna_v, Commented Jul 21, 2015 at 8:35

Fissio · Accepted Answer · 2015-07-21 08:37:44Z

1

Just removing myForm.title.$dirty from the ng-show will achieve what you want.

Plunker: http://plnkr.co/edit/7in4itj7OkPQKpytK7os?p=preview

answered Jul 21, 2015 at 8:37

Fissio

3,75818 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

form validation not working in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related