Aqqalu Josefsen Aqqalu Josefsen - 6 months ago 138
HTML Question

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

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

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