Angular JS form only works for the first time

Question

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

What it should do is very simple: it consumes a public JSONP Flickr stream in accordance with the Flicker specifications https://www.flickr.com/services/feeds/docs/photos_public/ and displays thumbnails of images

In the implemented form, there is a submit button, as well as a reset. My problems, I am trying to find solutions in order of importance:

• The first time you print tags, everything works, but when you try to send the request again by adding a new tag or user ID or anything that doesn't work anymore. I see this warning in the logs, but I do not know what causes itWARNING: Tried to load angular more than once.
• reset only works for thumbnails, but not for other controls on my page.
• I would like to find a way to show the error message when the user clicks on the button search flicker, and the input fields for tags and user IDs are empty. I tried to implement a custom directive, but could not get it to work.

Thank you in advance for your details.

Answer 1

• You download Angular more than once.

  

• The resetForm function does not have a reset form. It just calls $setValidityon two form elements.
  It looks like he is trying and resetting the form in another part of your code using

  document.getElementById("searchCriteriaTags").innerHTML = "";
  document.getElementById("searchCriteriaIds").innerHTML = "";
  document.getElementById("images").innerHTML = "";
  

  which means that you directly modify the DOM, see paragraph 4 for more details.

• , $scope.form.tags === '' .

• 3 , , . DOM , , .

---

EDIT 1 OP:

• Angular , , . , , - :

  $scope.tags = [] // for arrays
  $scope.name = '' // for strings
  

  ng-model, .

• , , :

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

---

EDIT 2 :

• -, , . -, , , , null, searchCriteria.tags = null;. : searchCriteria.tags = '';.

• , checkFields, , . , , , checkFields() ng-show div, 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);
  }