表单验证不能在角状态下工作

问题描述：

我创建了一个索引页，其中有一个文本区域控件和一个单击按钮。在点击按钮我重定向到一个新的HTML文件，我已经包括控件的形式。我试图验证控件，但似乎有错误。我也检查了控制台日志，但没有记录错误。表单验证不能在角状态下工作

我的工作拷贝这里： PLUNKER DEMO

索引文件

<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代码

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>

都工作的非常对我罚款;我假设当用户输入一个值然后删除它时应该出现红色文本。这里有什么问题？ – Fissio

是的。我希望红色文本在表单加载时出现，当文本输入时它应该消失。此外，当用户输入标题并删除它时，它应该像现在一样工作。 –

答

只删除从纳克出现myForm.title.$dirty将实现你想要什么。

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

表单验证不能在角状态下工作

相关推荐