Simple Login Form with Angular Validation

Simple Login Form with Angular Validation

<form ng-submit="signInForm.$valid && loginCtrl.login()" class="form" name="signInForm" novalidate>

    <!--Email -->
    <div class="form__item">
        <label>Email</label>
        <input name="email"
               type="email"
               ng-model="loginCtrl.creds.email"
               ng-model-options="{ 'updateOn': 'blur'}"
               required
               />
        <div ng-if="signInForm.email.$dirty && signInForm.email.$error" class="invalid">
            <span ng-if="signInForm.email.$error.required">
              Dude, you gotta put something in there
            </span>
            <span ng-if="signInForm.email.$error.email">
              Aw Snap, what kinda funky email is that? 
            </span>
        </div>
    </div>

    <!-- Password -->
    <div class="form__item">
        <label>Password</label>
        <input type="password"
               name="password"
               ng-model="loginCtrl.creds.password"
               ng-model-options="{ 'updateOn': 'blur'}"
               ng-minlength="7"
               ng-maxlength="20"
               required
               />
        <div ng-show="signInForm.password.$dirty" class="form__item__message invalid">
            <span ng-show="signInForm.password.$error.required">
              Blank is boring, enter something here. be creative.
            </span>
            <span ng-show="signInForm.password.$error.minlength">
              like my favorite rapper, this password is Too Short
            </span>
            <span ng-show="signInForm.password.$error.maxlength">
              Whoa there, hold your horses, that password is too secure
            </span>
        </div>
    </div>

    <!-- Submit Button -->
    <div class="form__item">
        <button type="submit"
          Sign In
        </button>
    </div>
</form>