我得到错误。 angular.js:13550 TypeError:无法读取属性' $ invalid'未定义的

时间:2016-05-25 10:20:42

标签: javascript html angularjs

我尝试复制此代码:http://blog.mgechev.com/2014/02/08/remote-desktop-vnc-client-with-angularjs-and-yeoman/但收到错误(请参阅下面的错误)。

任何人都可以帮助我吗?

这是我的js代码:

'use strict';

angular.module('clientApp')
  .controller('MainCtrl',
  function ($scope, $location, VNCClient) {

    $scope.host = {};
    $scope.host.proxyUrl = $location.protocol() + '://' + $location.host() + ':' + $location.port();

    $scope.login = function () {
      var form = $scope['vnc-form'];
      if (form.$invalid) {
        form.$setDirty();
      } else {
        VNCClient.connect($scope.host)
        .then(function () {
          $location.path('/vnc')
        }, function () {
          $scope.errorMessage = 'Connection timeout. Please, try again.';
        });
      }
    };

  });

我的HTML代码:

<div class="container">

  <div class="row" style="margin-top:20px">
      <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3" ng-controller="MainCtrl">
      <form role="form" name="vnc-form" novalidate class="css-form">
        <fieldset>
          <h2>VNC Login</h2>
          <hr class="colorgraph">
          <div class="form-error" ng-bind="errorMessage"></div>
          <div class="form-group">
              <input type="text" name="hostname" id="hostname-input" class="form-control input-lg" placeholder="Hostname" ng-model="host.hostname" required ng-minlength="3">
          </div>
          <div class="form-group">
              <input type="number" min="1" max="65535" name="port" id="port-input" class="form-control input-lg" placeholder="Port" ng-model="host.port" required>
          </div>
          <div class="form-group">
              <input type="password" name="password" id="password-input" class="form-control input-lg" placeholder="Password" ng-model="host.password">
          </div>
          <div class="form-group">
              <a href="" class="btn btn-lg btn-primary btn-block" ng-click="login()">Login</a>
          </div>
          <hr class="colorgraph">
        </fieldset>
      </form>
    </div>
  </div>

</div>

我收到了这个错误:

angular.js:13550 TypeError: Cannot read property '$invalid' of undefined
    at Scope.$scope.login (main.js:12)
    at fn (eval at <anonymous> (angular.js:14432), <anonymous>:4:206)
    at expensiveCheckFn (angular.js:15485)
    at callback (angular.js:25018)
    at Scope.$eval (angular.js:17229)
    at Scope.$apply (angular.js:17329)
    at HTMLAnchorElement.<anonymous> (angular.js:25023)
    at HTMLAnchorElement.jQuery.event.dispatch (jquery.js:4737)
    at HTMLAnchorElement.elemData.handle (jquery.js:4549)

1 个答案:

答案 0 :(得分:1)

表格名称不应该是&#34; - &#34;如果你必须访问角度控制器之间。只需将表单名称重命名为&#39; vncForm&#34;你完成了。

示例:

<form role="form" name="vncForm" novalidate class="css-form">
</form>

$scope.login = function () {
                          var form = $scope['vncFrom'];
                          if (form.$invalid) {
                            form.$setDirty();
                          }
                          ...
                        };