AngularJS show error when submitting - angularjs

Question

I am using AngularJS step wizard and inside the form for the first step I need validation errors to appear when the use tries to hit submit. Right now I have the following:
<span class="error" ng-show="user.validate.step1.firstname.$invalid">Required Field</span>
But the error shows when I first goto the step and when I start typing in the field it goes away, I would like this to appear when the user tries to hit submit, not when they first goto the step. I already have this to indicate a required field
<span class="error">*</span>
Here is the full code:
<form name="user.validate.step1" novalidate>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="firstname" class="col-md-4 form-label">First Name:</label>
<div class="col-md-8">
<div class="input-group">
<input class="form-control" type="text" name="firstname" ng-model="user.firstname" value="{{user.firstname}}" ng-blur="blur1=true" required />
<span class="error" ng-show="user.validate.step1.firstname.$invalid">*</span>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
keep in mind I have more than one input in this form.

Answer 1

Add the validation in the button using ng-click="validateInputs()" and create a var invalidEntry and a function validateInputs() to check if the input is valid or not. Something like this:
var inputs = [inputModel1,inputModel2,inputModel3];
function validateInputs(){
invalidEntry = false;
for(e in inputs){
if(CheckInvalid(inputs[e])){
invalidEntry = true;
return;
}
}
}
function CheckValid(string){
if(string == "" || string === null || string === undefined){
return true;
} else {
return false;
}
}
The submit button:
<button ng-click="validateInputs()">Submit</button>
And the span:
<span class="error" ng-show="invalidEntry">Required Field</span>
And the inputs should look like this:
<input type="text" ng-model="inputModel1"></input>
<input type="text" ng-model="inputModel2"></input>
<input type="text" ng-model="inputModel3"></input>

Answer 2

You should change ngShow in following way
ng-show="user.validate.step1.firstname.$invalid && !user.validate.step1.firstname.$pristine"
Check this article block AngularJS Form Validation: Only Showing Errors After Submitting the Form