im getting error. angular.js:13550 TypeError: Cannot read property '$invalid' of undefined

Question

I'm trying to copy this code: http://blog.mgechev.com/2014/02/08/remote-desktop-vnc-client-with-angularjs-and-yeoman/ but am getting an error (see the error down below).

Can anyone help me?

Here is my js code:

'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.';
        });
      }
    };

  });

And my html code:

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

And I get this error:

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)

Answer 1

Form name should not be having "-" in between if you have to access in angular controller. Just rename form name to 'vncForm" and you are done.

Example:

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

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