Angular JS form running only first time

Question

I am at the very beginning with my Angular learning and I implemented this form:
http://codepen.io/jgrecule/pen/WxgqqO

What it is supposed to do is very basic: it consumes Flickr public JSONP feed as per Flicker specs https://www.flickr.com/services/feeds/docs/photos_public/ and renders the retrieved pictures thumbnails

The form I implemented has a submit button as well as a reset one. My problems I am trying too find solutions in the order of their importance are:

The very first time when you typing tags everything works but when u try to submit the request again by either adding a new tag or an user Id or anything it no longer works. I can see this warning in the logs but I have no idea what is causing it
WARNING: Tried to load angular more than once.

The reset only works for the thumbnails but not for the other controls in my page

I would like to find a way to show an error message when the user pushes on the
search flicker
button and both tags and user ids input fields are empty. I tried to implement a custom directive but it was no way to get it working.

Thank you in advance for your inputs.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You are loading Angular more than once.
~~Your resetForm function doesn't reset the form at all. It just calls $setValidity on two of the form elements.~~
It looks like it does try and reset the form in another part of your code with
```
document.getElementById("searchCriteriaTags").innerHTML = "";
document.getElementById("searchCriteriaIds").innerHTML = "";
document.getElementById("images").innerHTML = "";
```
which means you are modifying the DOM directly, about which see point 4.
You can add a simple check as to whether $scope.form.tags === '' and so the same for the other fields in your form.
Having addressed your 3 points, I'm afraid to say your code has bigger problems. You are modifying the DOM directly all over the place and you have a lot of duplicate code, plus lots of very complex conditionals.

EDIT 1 in response to OP's comment:

The Angular way of clearing form fields would be to simply clear the scope objects that the form fields are bound to. In other words it is as simple as doing something like:
```
$scope.tags = [] // for arrays
$scope.name = '' // for strings
```
Because the form fields are bound to these scope variables through the ng-model directive, changing the variables will also change the form fields.

Setting an error message when two fields are empty you can do like this:

$scope.checkFields = function(field1, field2) {
    var oneEmpty = field1 === '';
    var twoEmpty = field2 === '';
    if (oneEmpty && twoEmpty) {
        // call the failure message here
    }
}

EDIT 2 in response comments:

Firstly good to see that your code is looking a lot cleaner. Secondly, the reason it fails is because in your search function you set the search fields to null, eg searchCriteria.tags = null;. You should set them to empty strings instead: searchCriteria.tags = '';.
I don't know what the purpose of checkFields is so I don't know where you want to place it. If you want to show an error message if the fields are empty then I'd say have checkFields() return a boolean and use ng-show to display the error div if checkFields() === false.

HTML:
```
<div ng-show="checkFields() === false">Fields can't be empty</div>
```
JS:
```
$scope.checkFields = function(field1, field2) {
    var oneEmpty = field1 === '';
    var twoEmpty = field2 === '';
    return (oneEmpty || twoEmpty);
}
```

Angular JS form running only first time

Sign up