4

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:

  1. 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.
  2. The reset only works for the thumbnails but not for the other controls in my page
  3. 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.

1
  • 1
    your javascript doesn't even make any sense in that codepen. First, you have the same module and controller defined twice, and then you have some random code at the end that isn't even in an angular module but is still trying to use $scope. plus you have both angular.js and angular.min.js listed (also bootstrap), which you only need one. Your first step here should be eliminating the duplication and consolidating the code into a single angular module. Commented Aug 19, 2016 at 8:15

1 Answer 1

1
  1. You are loading Angular more than once.

    enter image description here

  2. 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.

  3. You can add a simple check as to whether $scope.form.tags === '' and so the same for the other fields in your form.

  4. 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:

  1. 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.

  2. 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:

  1. 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 = '';.
  2. 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);
    }
    
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks Aron, It seems the issue no 1) is fixed by removing one of the two angular.js load. 2) I done the DOM manipulating as a desperate way to actually fix the issue. What would be the angular way of doing it? 3) It is a combined check. Either one of the two fields can be empty as long as the other one is not. My question was how can I put a failure message when both fields are empty.
Thanks again Aron. I just want to understand what I am doing wrong and get it working, 2) seems to work. pwn updated. Just type frog' and you will load some pics. the add mountains` and the pics will change. Then reset form which works but once u search from frog again nothing happens. Please help, Also where would u call checkFields from?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.