Angular Js Html5 Validation

I have a form that I have used the required tag on my inputs - this works fine but on my submit button I have ng-click='visible = false' that hides the form when the data is submit

Solution 1:

If you give a name to the form that FormController will be exposed in the nearest controller scope by its name. So in your case say you have a structure something like

<divng-controller="MyController"><!-- more stuff here perhaps --><formname="birthdayAdd"ng-show="visible"ng-submit="newBirthday()"><label>Name:</label><inputtype="text"ng-model="bdayname"required/><label>Date:</label><inputtype="date"ng-model="bdaydate"required/><br/><buttonclass="btn"ng-click="onSave()"type="submit">Save</button></form></div>

Now in your controller

functionMyController($scope){
    // the form controller is now accessible as $scope.birthdayAdd$scope.onSave = function(){
        if($scope.birthdayAdd.$valid){
            $scope.visible = false;
        }
    }
}

If the input elements inside the form are valid then the form will be valid. Hope this helps.