Angular show errors only when input not empty and invalid

Question

I'm trying to toggle an error area on my form that only triggers once there is some input, it's a bit silly to have the errors all appear if the user hasn't started typing yet.

<form name="registerForm">
  <input type="email" name="email" ng-model="email" required />
</form>

<span ng-show="registerForm.email.$invalid">
  Invalid email.
</span>

This works fine once I'm typing but I want it to show no errors if the input is empty. I've tried using the model ng-hide="!email.length" but can't get it to work.

Answer 1

<span ng-show="registerForm.email.$invalid && registerForm.email.$dirty>