is it possible to validate an entire form instead of the individual fields of the form? I have a REST api that I would like to receive validation errors from but all the examples that I have come across are attaching a directive to individual fields instead of the form tag.
Related
I have a form with an input that is "required". This is perfect when your value is just a text.
I also have a directive that outputs a json string. I want also to validate this json before submitting the form.
I can't create an input with this ng-model because inside that input says [Object]. Is it a good practice to stringify this json and create a custom validator that validates the json?
No it's not a good practice, you should not do that instead u make different inputs for different properties of JSON because stringify can't validate your JSON. Json should be either dynamically created for when the form has been submitted after validation.
I am using angular-schema-form, and ran into a problem that when I load a schema and a form from a server using REST, the validation sometimes did not kick in. I could post a schema even though some fields were required.
How can I always be sure that the required fields in the form has to be filled in by the user before posting?
I found that using $scope.$broadcast('schemaFormValidate'); before submitting the form works (from the docs).
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
// ... do whatever you need to do with your data.
}
}
However, we can not disable any buttons beforehand.
#John you can set a value in your model that is part of a display condition. That allows you to hide the buttons on submit and then re-enable them when you are ready for the user to submit the form again for any reason.
I have form split in two tabs and submit button is present on the second tab.Elements in both the tabs are present enclosed within same form tag and share same "ng-controller".Problem is I can submit the form without filling form elements in the first tab and it shows error scope object is undefined.How do I validate the form elements in this case and save the scope data on pressing submit.Any suggestions would be of great help.
With regards to your validation problem, you'll want to validate that each required field has been filled-out correctly before acting on the submit. What I would do: instead of the submit button directly calling the submit functionality, it would call a function that checks for all the necessary values on the scope, and if it works, then it calls the submit function.
With regards to saving the data, you'll either want to save it to a db or store it temporarily in a service.This is a pretty good tutorial on services: http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
When my field becomes invalid, is there a way to fire a method in my js?
So for example, the user fails to fill out the name field, clicks submit, I want to:
console.log('they forgot');
Thanks
There is a $error object made available by AngularJS. This object contains all of the validations on a particular form and tells if they are valid or invalid.
To get access to this property, we can use the following syntax:
formName.inputfieldName.$error
Here is a jsfiddle sample
This document is a good reference for understanding form-validations using AngularJS.
Also, for dealing with custom validations, you can add your own directives. A sample of making such directives is given in the link above.
I'm creating a web client that works with a settings web API with angular.
There are a lot of settings and they are all optional. If I send a setting, it should be saved. Settings that are not sent should not change.
The requirement is to have one Save Changes button for all the settings.
I wonder if there is some way in Angular to implement this.
I thought about not using HTML form and collecting the data and creating an ajax request by myself but then I will lose the validation mechanism (that is working well with Angular-UI validate).
I thought about splitting the form into little forms and submiting only the forms where ng-dirty is not false, but this can cause a partial save if some requests will fail (and this is against the requirement).
Any idea?
You can check if the form or any named field is modified before submission. If the form has a name and your inputs have names like:
<form name="myForm">
<input name="input1">
</form>
In the controller you will have access to the object $scope.myForm and $scope.myForm.input1, and these objects will have a $dirty property which is true if the original value was modified by the user.
In the Angular documentation there is an example that covers ng-copy to implement a reset function.
http://docs.angularjs.org/cookbook/advancedform
During submit you could compare your starting model(master copy) to the changed/submitted object (changed copy) and only submit the changed items (or just delete those that are the same/unchanged).
Diff the copy and master with
http://blog.vjeux.com/2011/javascript/object-difference.html
This needs extra work to handle arrays.
Or convert to JSON and diff the JSON
https://github.com/benjamine/JsonDiffPatch