How to load Validation error dynamically in Angular/HTML

Question

I've a form control where user has to enter Id. I've validated submit button to enable only when field is filled with value(only numbers).

<input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/>
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/>

But I want to notify user dynamically when he tries to enter alphabets like "You should only enter Numbers" because user may not know the reason why Submit button is disabled when he enters alphabets.

Answer 1

For this purpose you could use $error property of form of field level $error property.

<form name="adduserform">
  <input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/>
  <span ng-show="adduserform.Movid.$invalid"> Only number are allowed</span>
  <input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/>
</form>

In above example I had used adduserform.Movid.$invalid which will tell us that Movid is valid field or not, & if it doesn't valid then validation message will shown.

Update

As we want two different errors to be show we could use $error.required to get required error & $error.pattern to get patterns match or not

Markup

<span style="color:red" ng-show="adduserform.Movid.$dirty && adduserform.Movid.$invalid"> <br /> 
  <span ng-show="adduserform.Movid.$error.required" class="spnmsg">Field must not be empty</span> 
  <span ng-show="adduserform.Movid.$error.pattern">Only Numbers</span> 
</span>

Working Plunkr