I'm trying to figure out if it is possible to validate data client side to ensure that no duplicates are sent to the database. I have an angular app which gets data from an api call. This is my current controller for adding a new subject (functioning perfectly, but without data validation):
angular.module('myApp.controllers')
.controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location', '$route',
function ($scope, SubjectsFactory, $location, $route) {
// callback for ng-click 'createNewSubject':
$scope.createNewSubject = function () {
SubjectsFactory.create($scope.subjects);
$location.path('/subjects');
}
}]);
And here is what I have been attempting for data validation:
angular.module('myApp.controllers')
.controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location', '$route',
function ($scope, SubjectsFactory, $location, $route) {
// callback for ng-click 'createNewUser':
$scope.createNewSubject = function () {
var newSubject = $scope.subject.name;
var someSubject = $scope.subjects;
var oldSubject;
if(newSubject){
angular.forEach($scope.subjects, function(allSubjects){
if(newSubject.toLowerCase() == allSubjects.name.toLowerCase()){
oldSubject = true;
}
});
if (!oldSubject){
SubjectsFactory.create($scope.subjects);
}
}
}
}]);
This gives me a console error- TypeError: Cannot read property 'name' of undefined. How do I access the 'name' property of my new subject from the html? Can anyone tell me if what I am trying to do is possible/ makes sense?
If I understand your question correctly, you should use a directive for the specific field you are trying to validate. A unique email directive would be a common example. Here is one I have used in the past. Nothing fancy.
MyApp.directive('uniqueEmail', ['$http', function($http) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
//set the initial value as soon as the input comes into focus
element.on('focus', function() {
if (!scope.initialValue) {
scope.initialValue = ctrl.$viewValue;
}
});
element.on('blur', function() {
if (ctrl.$viewValue != scope.initialValue) {
var dataUrl = attrs.url + "?email=" + ctrl.$viewValue;
//you could also inject and use your 'Factory' to make call
$http.get(dataUrl).success(function(data) {
ctrl.$setValidity('isunique', data.result);
}).error(function(data, status) {
//handle server error
});
}
});
}
};
}]);
Then in your markup you could use it like so.
<input type="text" name="email" ng-model="item.email" data-unique-email="" data-url="/api/check-unique-email" />
<span class="validation-error" ng-show="form.email.$error.isunique && form.email.$dirty">Duplicate Email</span>
Hope this is what you were looking for.
I have implemented object creation in Angular js many times.
My createNew button method typically just created a new javascript Object() and set the scope.currentObject to the new Object();
In your case it appears that $scope.subject is not initialized to anything, hence the error.
I guess that there must be a html input on your form that is bound the subject.name field but without a subject Object to hold the name it is effectively unbound.
If I wanted users to enter a name then click create button to validate that the name is not used. I would bind the new Name input to a different $scope variable (perhaps $scope.newName)
Then in the createNewSubject method you can actually create a new subject like this:
$scope.subject = new Object();
$scope.subject.name = $scope.newName;
Then you can run your validation code.
Related
I am using validation on AngularJS side as well as serve side (e.g. for duplicate value check) and would like to expose these errors to users. Without ng-fab-form I was able to build custom server error directive and use it like this:
<input type="number" id="level" name="level" ng-model="vm.record.level"
server-error
required>
<div ng-messages="vm.form.role_level.$error">
<p ng-message="server">{{ vm.errors.level }}</p>
</div>
But the goal of the library is to get rid of this kind of duplication. As you can see I am using Controller as syntax and assigning the errors to each field, when saving/updating the model fails:
angular.forEach(result.data.errors, function (errors, field) {
vm.form[field].$setValidity('server', false);
vm.errors[field] = errors.join(', ');
});
I customised validation template to show messages for server error, however, I am not able to display dynamic error text. I suppose the problem is related to scope inheritance. Any ideas how could I achieve the desired effect?
I just found a way how to do it:
Add custom attribute, to hold the server error message value and watch the error in it.
<input type="number" id="level" name="level" ng-model="vm.record.level"
validation="{{ vm.errors.level }}
server-error
required>
In validation template display the attribute value.
<li ng-message="server">{{ attrs.validation }}</li>
I would recommend using $asyncValidators instead of $setValidity from angular#1.3.2 on.
app.directive('username', function($q, $timeout) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
var usernames = ['Jim', 'John', 'Jill', 'Jackie'];
ctrl.$asyncValidators.username = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) {
// consider empty model valid
return $q.when();
}
var def = $q.defer();
$timeout(function() {
// Mock a delayed response
if (usernames.indexOf(modelValue) === -1) {
// The username is available
def.resolve();
} else {
def.reject();
}
}, 2000);
return def.promise;
};
}
};
});
(example taken from the docs)
Then you could just add the message to your own validations template:
angular.module('exampleApp', [
'ngFabForm'
])
.config(function (ngFabFormProvider)
{
ngFabFormProvider.extendConfig({
validationsTemplate : 'path/to/your-fabulous-validation-template.html'
});
});
And in the template add:
<li ng-message="username">I'm not valid!!! ;(</li>
There also was an issue about that on the github-page of the module: https://github.com/johannesjo/ng-fab-form/issues/34
For a cleaner solution there would have to be an interface, which doesn't exist yet, but you could always open an issue for that.
I'm trying to take the first example from the angular.js homepage and adding in cookie support.
This is what I have so far: https://jsfiddle.net/y7dxa6n8/8/
It is:
<div ng-app="myApp">
<div ng-controller="MyController as mc">
<label>Name:</label>
<input type="text" ng-model="mc.user" placeholder="Enter a name here">
<hr>
<h1>Hello {{mc.user}}!</h1>
</div>
</div>
var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', [function($cookies) {
this.getCookieValue = function () {
$cookies.put('user', this.user);
return $cookies.get('user');
}
this.user = this.getCookieValue();
}]);
But it's not working, ive been trying to learn angular.
Thanks
I'd suggest you create a service as such in the app module:
app.service('shareDataService', ['$cookieStore', function ($cookieStore) {
var _setAppData = function (key, data) { //userId, userName) {
$cookieStore.put(key, data);
};
var _getAppData = function (key) {
var appData = $cookieStore.get(key);
return appData;
};
return {
setAppData: _setAppData,
getAppData: _getAppData
};
}]);
Inject the shareDataService in the controller to set and get cookie value
as:
//set
var userData = { 'userId': $scope.userId, 'userName': $scope.userName };
shareDataService.setAppData('userData', userData);
//get
var sharedUserData = shareDataService.getAppData('userData');
$scope.userId = sharedUserData.userId;
$scope.userName = sharedUserData.userName;
Working Fiddle: https://jsfiddle.net/y7dxa6n8/10/
I have used the cookie service between two controllers. Fill out the text box to see how it gets utilized.
ok, examined your code once again, and here is your answer
https://jsfiddle.net/wz3kgak3/
problem - wrong syntax: notice definition of controller, not using [] as second parameter
If you are using [] in controller, you must use it this way:
myApp.controller('MyController', ['$cookies', function($cookies) {
....
}]);
this "long" format is javascript uglyfier safe, when param $cookies will become a or b or so, and will be inaccessible as $cookies, so you are telling that controller: "first parameter in my function is cookies
problem: you are using angular 1.3.x, there is no method PUT or GET in $cookies, that methods are avalaible only in angular 1.4+, so you need to use it old way: $cookies.user = 'something'; and getter: var something = $cookies.user;
problem - you are not storing that cookie value, model is updated, but cookie is not automatically binded, so use $watch for watching changes in user and store it:
$watch('user', function(newValue) {
$cookies.user = newValues;
});
or do it via some event (click, submit or i dont know where)
EDIT: full working example with $scope
https://jsfiddle.net/mwcxv820/
I am trying to populate the ng-model from a value, but don't want it to update until it is saved. To do this I have the following code;
Controller;
var SettingsController = function (roleService) {
var ctrl = this;
ctrl.rename = function(name) {
ctrl.account.name = name;
};
roleService.role.settings().then(function (result) {
ctrl.account = result.data.account;
}, function (result) {
console.log(result);
});
};
A simple controller, it gets the current settings from a service and sets it to the ctrl.
When the rename(name) is called I update the name of the account (for now it just updates the scope but soon it will update also the back-end)
To rename your account I have the following piece of code
<input type="text" data-ng-model="account.name" />
<button type="button" data-ng-click="ctrl.rename(account.name)">
Rename
</button>
I use controler as so ctrl == SettingsController
Now I use data-ng-model="account.name" to update the name. This is done so I only update the name when the button is called. The only issue is how do I get the ctrl.account.name value to the input, without bubbling it up.
I could add $scope to my controller with $scope.account but that seems overkill to me. Isn't there a way to copy/populate a ng-model from an other value or some kind?
To get to the controller I use the angular routerProvider;
$routeProvider
.when('/settings/', {
templateUrl: '/user/template/settings/',
controller: 'SettingsController',
controllerAs: 'ctrl'
});
I have a directive which is fetching data through ajax on load. But after an event in the controller which is posting some data, the Directive should re-compile with the new ajax data so that the changes can be reflected. Can you please help.
I have a compile function in the directive which takes data and puts that in HTML file and generates markup.
Then I have a save comment function in the controller which saves a new comment and so the directive gets the new data.
compile: function(tElement, tAttrs) {
var templateLoader = $http.get(base_url + 'test?ticket=' + $routeParams.ticketid, {cache: $templateCache})
.success(function(htmlComment) {
if (htmlComment != '')
tElement.html(htmlComment);
else
tElement.html('');
});
return function (scope, element, attrs) {
templateLoader.then(function (templateText) {
if (tElement.html() != '')
element.html($compile(tElement.html())(scope));
else
element.html('<div class="no-comments comment"><p>Be the first to comment</p></div>');
});
};
}
This is the compile part of the directive. I want this to be called through a normal controller event.
I would recommend #Riley Lark' response but as you already mentioned that your API returns an HTML instead of JSON, here is my take.
Your controller as:
<div ng-controller="MyCtrl">
<button ng-click="save()">Save Comment</button>
<comments></comments>
</div>
myApp.controller('MyCtrl', function($scope) {
$scope.commentHTML = '';
$scope.alert = function(salt) {
alert('You clicked, My Comment ' + salt);
}
$scope.save = function() {
// this imitates an AJAX call
var salt = Math.random(1000);
$scope.commentHTML+= '<div ng-click="alert(' + salt + ')">My Comment ' + salt + '</div>';
};
});
And the comments directive as:
myApp.directive('comments', function($compile) {
return {
restrict: 'E',
link: function(scope, element) {
scope.$watch(function() { return scope.commentHTML; }, function(newVal, oldVal) {
if (newVal && newVal !== oldVal) {
element.html(newVal);
$compile(element)(scope);
}
});
}
}
});
Hope this solves your problem..!
Working Demo
After you fetch the data you need, put the data in a $scope property. Define your template in terms of that property and it will automatically change when the data returns.
For example, your template might be
<div ng-repeat="comment in comments">
{{comment}}
</div>
You don't need a compile function or to "reload a directive" to accomplish this. The solution you posted is a sort of reimplementation of angular. It looks like you want to download a template with the data already interpolated into it, but Angular will help you the most if you separate the template from the data and let Angular interpolate it on the client.
My model contains some data that does not passes the form's validation (say an invalid email address that comes from the server). I still want to show this invalid model data to the user so they get a chance to fix it.
Minimal example:
<form ng-init="email='foo'">
<input type="email" ng-model="email"></input>
</form>
How do I get the input to show the initial invalid model value?
JS Fiddle: http://jsfiddle.net/TwzXV/4/
This behaviour is reported as a bug. https://github.com/angular/angular.js/issues/2841
You can go around this behaviour by creating a directive UNTIL this bug is fixed :)
I got this from google mailing list
http://jsfiddle.net/nalberg/XccGJ/
app.directive('displayInvalid', function($parse, $filter) {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, elm, attrs, model) {
var displayed = false;
scope.$watch(attrs.ngModel, function(newValue, oldValue, scope) {
// only set once... on initial load
if(displayed == false && oldValue != undefined){
displayed = true;
elm.val(model.$modelValue);
}
});
}
}
})