Question

我创建了一个索引页面，其中有一个文本区域控件和一个单击按钮。点击按钮后，我将重定向到一个新的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>

Answer 1

只需从ng-show中移除myForm.title.$dirty即可实现您的目标。

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

表格验证无法有角度地工作

1 个答案: