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.
Related
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.
My goal was to have off a form submit for a get to be performed and as part of the uri, key value pairs appended like the following:
// GET /pets/42;q=11;r=22
Reading http://www.w3schools.com/tags/att_form_method.asp
description of form with setting form method to "get" I would have thought this was possible. In the world of angular, it seems like the expected behavior for a submit of a form results in post method. The controller can be written to generate any http verb but has the $http.get doesn't do what plain form get method would automatically and to generate a url like above, the controller would have to build the uri itself.
My apprehension of always using post off a form submit was the form in this case was part of a query/search action and not a data creation exercise. Maybe that's not the proper way to use form but has angular done away with automatically appended values from controls in key value pairs for a form with the $http.get service?
Of course you can do GET with query params in url.
The easiest way is to pass an object representing the key/value pairs to the params property of the $http config object.
var params = {q: 11, r:22};
$.get('/path/to/server/', {params: params}).then(....
Alternatively you can also create your own url string when you only have small number of params.
For further details read through the Usage section of $http docs
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 need to remove all br tags from the json data I am working with before rendering to the template.
Im wondering if there is a pre-existing angular directive which could be used for this, or if there is a way to do it by creating a custom filter. The documantation on filters doesnt seem to be easily adaptable to this usecase.
Do you need to remove <br>s from a specific object property like remove HTML from a string (in JSON response) or do you need to remove them from all properties of the JSON object?
You should be able to just put some JavaScript code into a custom filter (the custom filter would return either a modified JSON object or a new object), and then call that filter from your HTML when you want to display the JSON.
If you are displaying different parts of your JSON object using different ng-repeat, ng-show, etc. directives, it might make more sense to filter the JSON once in your controller, then use the filtered version in the HTML/template. A little more information about your actual use case would help.