title: Set empty input field to ng-invalid on submit using AngularJS?
body: <p>I want to set input field to ng-invalid if a user clicks submit and the form fields are empty using AngularJS. I know a directive can be used to custom form validation and using $setValidity to manually set the input field but I'm not sure I need a directive to just highlight the empty/required fields on submit. Any help would be greatly appreciated. Thank you.</p>
  
  <p>Here is the code I am working with:
  HTML</p>
  
  <pre><code>&lt;form name="SignUpForm ng-submit="submitUser()" novalidate&gt;
  &lt;input type="text" name="dob" ng-model="dob" placeholder="Date of Birth" required /&gt;
  &lt;span class="error" ng-show="signUpForm.dob.$dirty &amp;&amp; signUpForm.dob.$invalid"&gt;Please provide a valid date of birth&lt;/span&gt;
  &lt;input type="text" name="email" ng-model="email" ng-pattern="/^([0-9a-zA-Z]([-\.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/" placeholder="Email" required /&gt;
  &lt;span class="error" ng-show="signUpForm.email.$dirty &amp;&amp; signUpForm.email.$invalid"&gt;Please provide a valid email address&lt;/span&gt;
  &lt;button type="submit"&gt;Submit&lt;/submit&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>SASS/CSS</p>
  
  <pre><code>input {
  &amp;.ng-valid.ng-dirty {
  color: #fff;
  background-color: rgba(146, 253, 156, 0.5);
  border-color: #92fd9c;
  box-shadow: inset 2px 2px 2px #92fd9c;
  }
  &amp;.ng-invalid.ng-dirty {
  color: #850000;
  background: rgba(254, 186, 186, 0.5);
  border: 1px solid #850000;
  }
  </code></pre>
  
  <p>AngularJS</p>
  
  <pre><code>$scope.submitUser = function() {
  if ($scope.signUpForm.$valid) {
  // Set form values &amp; construct data to send
  } else {
  $scope.response = "Please fill in the required fields";
  }
  </code></pre>