i now trying to migrate my legace app to Angular and now stuck with following issue. I have this simple form:
<form name="loginForm" ng-controller="LoginCtrl" ng-submit="doLogin()">
<input type="text" name="login" ng-model="login.login" />
<span class="errors" ng-show="loginForm.login.$error.required">Required</span>
<span class="errors" ng-show="loginForm.login.$error.bad_login">Login or pass incorrect</span>
<input type="password" ng-model="login.pass"/>
</form>
Server returns error as this type of JSON: { login: 'bad_login', pass: 'incorrect' } And in controller:
function LoginCtrl($scope, $http) {
$scope.doLogin = function() {
var model = $scope.login;
var req = { "login": model.login, "pass": model.pass };
$http({ method: "POST", url: "/login", data: req }).success(function (resp) {
if(resp.status != "ok") {
angular.forEach(resp, function (value, key) {
// ex: model['login'].$setValidity('bad_login', false);
model[key].$setValidity(value, false);
});
}
});
};
}
I try to mark each field in loop, not to hardcode every field by hand. but this approach not working. I get this error: TypeError: Cannot call method '$setValidity' of undefined
, even when field is left empty i have another error: TypeError: Cannot read property 'login' of undefined
So i think i need to get instance of model for every field in form, any ideas ?
The reason it's coming back undefined is because unless you actually specify something for $scope.login.login or $scope.login.pass to begin with, they aren't set. If you put a space and delete it, you'll see they are set as blank. What you're going to want to do is at the beginning of your controller define the login on the scope like so:
function LoginCtrl($scope, $http) {
$scope.login = {
login: "",
pass: ""
};
$scope.doLogin = function() {
var req = { "login": $scope.login.login, "pass": $scope.login.pass };
$http({ method: "POST", url: "/login", data: req }).success(function (resp) {
if(resp.status != "ok") {
angular.forEach(resp, function (value, key) {
// ex: model['login'].$setValidity('bad_login', false);
$scope.login[key].$setValidity(value, false);
});
}
});
};
}