angularjs - form validation not working in angular -


i have created index page have text area control , click button. on clicking button redirecting new html file have included form controls. trying validate controls seems there error. checked console log 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 create 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 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 required.</span> </span> </p>  </form>  </div> 

just removing myform.title.$dirty ng-show achieve want.

plunker: http://plnkr.co/edit/7in4itj7okpqkpytk7os?p=preview


Comments