Angular Form - "Required" with ng-model-options

Question

I have a form with two fields:

<form name="form">
    <input type="email" ng-model-options="{ updateOn: blur }" required />
    <input type="password" ng-model-options="{ updateOn: blur }" required />
    <div ng-show="form.password.$error.required">Password required</div>
</form>

The error div is always displayed when the password field is empty - I only want it to display if the password has been focused and then blurred. Is there a simple change I can make to enable this?

Answer 1

<div ng-show="form.password.$error.required && form.password.$dirty">Password required</div>

You can do this by adding condition of dirty field. So if the field will be dirt then only it will show error