HTML:

<div class=form-group 

     ng-class={ 'has-error' : form.firstName.$invalid && form.firstName.$touched }>

  <label for=firstName 

         class=control-label>

         First Name

  </label>

  <input type=text 

         name=firstName 

         id=firstName 

         ng-model=editableUser.firstName 

         class=form-control 

         required>

  <span class=help-block 

        ng-show=form.firstName.$error.required && form.firstName.$touched>

        First Name is required

  </span>

</div>



<input type=submit 

       ng-click=submit() 

       value=Submit 

       class=btn btn-default>

I'm trying to get my the 'has-error' class to kick in for invalid fields when a user clicks submit.

I would think you could do something like this:

$scope.submit = function () {

  if ($scope.form.$invalid) {

    angular.forEach($scope.form.$invalid, function(field) {

      field.$setTouched();

    });

    alert(Form is invalid.);

  }

};

But there is no $setTouched method in https://docs.angularjs.org/api/ng/type/form.FormController

EDIT: Realize $setTouched does exist, it's in https://docs.angularjs.org/api/ng/type/ngModel.NgModelController