Validation are not show after click the button in Angular JS? - angularjs

Question

I have to show the validation after submit button in our form i don't understand what's the wrong in my code tell m anyone how to implemented using after submit?
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)">
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>

Answer 1

You need to add in your input a ng-required="true" and disable default form validation with novalidate like this:
var app = angular.module("demoApp", []);
app.controller("demoController", function($scope) {
// function to submit the form after all validation has occurred
$scope.submitDetail = false;
$scope.submitForm = function(isValid) {
$scope.submitDetail = true;
// check to make sure the form is completely valid
if (isValid) {
alert('our form is amazing');
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="demoController" >
<form role="form" class="sa-innate-form" name="signUpForm" ng-submit="submitForm(signUpForm.$valid)" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="username" ng-model="user.username" ng-required="true">
<p ng-show="(signUpForm.username.$dirty || submitDetail) && signUpForm.username.$error.required" class="help-block">
You name is required.
</p>
</div>
<button type="submit">Join now</button>
</form>
</div>