title: how to set all inputs as $touched without submit button AngularJS
body: <p>I have a directive that validates inputs inside a form based on their <code>$valid</code> and <code>$untouched</code> properties - if the input was "touched" it checks for validation and colors the font and border in red/green accordingly, if the input wasn't "touched" it won't do anything. </p>
  
  <p>I'm using ngBootBox's custom dialog so i don't have the <code>type="submit"</code> kind of button for submitting the form, I'm using the callback function of the "Create" button in order to pass/save the data.</p>
  
  <p>My problem is that when I click the "create" button and the form is not "valid" because some of the fields are empty - my inputs are still "untouched" so the <code>$watch</code> function isn't being called.
  Any solutions? Is there a way to do something like this:
  <code>$scope.createProjectForm.$setTouched(true);</code> that will make all child inputs of that form to get that value?</p>
  
  <p>I also tried that and it didn't work:</p>
  
  <pre><code>angular.forEach($scope.createProjectForm, function(field){
     field.$setTouched(true);
  });
  </code></pre>
  
  <p>this is my validation directive:</p>
  
  <pre><code>angular.module('mean.theme').directive("inputValidation", function () {
      return {
          restrict: 'EA',
          require: 'ngModel',
          link: function (scope, inputElement, attrs, ngModelCtrl) {
              var $icon = $('&lt;i class="fa"&gt;&lt;/i&gt;');
              inputElement.before($icon);
              scope.$watchGroup([
                  function(){
                      return ngModelCtrl.$untouched;
                  },
                  function(){
                      return ngModelCtrl.$valid;
                  }
              ], function(Paramaters){
                  console.log(scope);
  
                  if(!Paramaters[0]) {
                      if (Paramaters[1]) {
                          inputElement.switchClass('validation-warning-border','validation-success-border',50)
                          inputElement.prev().switchClass('fa-warning validation-warning-font' , 'fa-check validation-success-font',50);
                      } else {
                          inputElement.switchClass('validation-success-border','validation-warning-border',50)
                          inputElement.prev().switchClass('fa-check validation-success-font','fa-warning validation-warning-font',50)
                      }
                  }
              });
          }
      };
  });
  </code></pre>
  
  <p>and this is part of my controller code:</p>
  
  <pre><code>    $scope.create = function () {
          var options = {
              title: 'Create',
              templateUrl: 'project.html',
              scope: $scope,
              buttons: {
                  warning: {
                      label: "Cancel",
                      className: "btn-link",
                      callback: function () {
                      }
                  },
                  success: {
                      label: "Create",
                      className: "green",
                      callback: function () {
                          if ($scope.createProjectForm.$valid){
                              $scope.createProject(template);
                          } else {
                              $scope.project.createButtonClicked = true;
                              return false;
                          }
                      }
                  }
              }
          };
          $ngBootbox.customDialog(options);
      };
  </code></pre>
  
  <p>and this is part of my HTML code:</p>
  
  <pre><code>&lt;form role="form" name="createProjectForm"&gt;
      &lt;label&gt;
          Name Your Project
      &lt;/label&gt;
      &lt;div&gt;
          &lt;input type="text" name="project.name"
                 ng-model="project.name" required="required" class="form control" input-validation/&gt;
      &lt;/div&gt;
      &lt;label&gt;
          Name Your Project
      &lt;/label&gt;
      &lt;div&gt;
          &lt;input type="text" name="project.title"
                 ng-model="project.title" required="required" class="form control" input-validation/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <ul>
  <li><strong>EDIT:</strong></li>
  </ul>
  
  <p>I found what i needed, easier and shorter way to do it:</p>
  
  <p>It is possible to set manually:
  <code>$scope.createProjectForm.$setSubmitted()</code> to <code>true</code></p>
  
  <p>and then make the children(inputs) <code>$watch</code> for this change as well:</p>
  
  <pre><code>scope.$watchGroup([
              function(){
                  return ngModelCtrl.$untouched;
              },
              function(){
                  return ngModelCtrl.$valid;
              },
              function(){
                  return ngModelCtrl.$$parentForm.$submitted;
              }
          ], function(Paramaters){
           // code here
          }
  </code></pre>