Angular - Validation on button click then next function - html

Question

New to Angular so apologies if this question has been asked before.
I've got field validation working well with ng-messages (great tutorial here if anyones interested).
However what I've read/learnt so far does validation whenever fields are touched.
<div ng-messages="{ required: !main.o1ToAdd || !main.o2ToAdd }"
ng-if="myForm.o1.$touched || myForm.o2.$touched">
<span ng-message="required">you need to specify at least 2</span>
</div>
and on the inputs
<input name="o1" ng-model="main.o1ToAdd" type="text" placeholder="Yes" required
ng-class="{ 'invalidInputField': myForm.o1.$touched && myForm.o1.$invalid }"/>
However I dont really want an error to appear if a user clicks on a field.
Instead I have a post button - so if thats click on then should all verification across the form be made. What I'm unsure of is I already have a ng-click on that button - how do i make it do the verification first and then if successful, proceed with the actual post function. (and ideally I dont want to disable the button i.e. have it greyed out).
<button class="button" ng-click="home.post()">Post</button>
Any help would be appreciated.
Thanks.

Answer 1

May be help you.
angular.module("test", []).controller("TestCtrl", function($scope) {
$scope.onSubmit = false;
$scope.submit = function() {
if(!$scope.theForm.$valid)
$scope.onSubmit = true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="TestCtrl">
<form name="theForm">
<input type="text" required name="foo" ng-model="foo" />
<p ng-show="onSubmit && (theForm.foo.$touched || !theForm.foo.$valid)">error at foo input</p>
<input type="text" required name="bar" ng-model="bar" />
<p ng-show="onSubmit && (theForm.bar.$touched || !theForm.bar.$valid)">error at bar input</p>
<button ng-click="submit()" type="button">Submit</button>
</form>
</div>