I'm completely new to Angular and I'm attempting to implement validation in my form. The form structure was not created by me and is as follows:
<div>
<div ng-switch="step">
<div ng-switch-when="1">
<h1>Identity</h1>
<form name="steponeForm" ng-submit="submitForm(steponeForm.$valid)" novalidate>
<input type="submit" ng-click="next()" value="next" />
<input ng-model="application.lastName" required type="text" placeholder="Last name" name="app-name" id="app-name" />
<input ng-model="application.firstName" type="text" placeholder="First name" name="app-firstname" id="app-firstname" />
....
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="2">
<h1>Studies</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<legend>Lower secondary studies</legend>
<button id="moreLowerSecondaryStudies" more-studies>+</button>
</fieldset>
<fieldset>
<legend>Higher secondary studies</legend>
<button id="moreHigherSecondaryStudies" more-studies>+</button>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="3">
<h1>Knowledge</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<label for="app-interests-personal">Other matters of personal interest</label>
<textarea id="app-interests-personal" ng-model="application.interestsPersonal">
</textarea>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="4">
<h1>Professional experience</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
<fieldset>
<legend>Data with regard to your professional life, beginning with your last employer.</legend>
<button id="more-experience" more-experience>+</button>
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="next()" value="next" />
</form>
</div>
<div ng-switch-when="5">
<h1>Miscellaneous</h1>
<form>
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="finish()" value="save" />
<fieldset>
<legend>Have you already applied with VK?</legend>
<input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="no" id="app-already-applied-no" />no<br>
<input ng-model="application.alreadyApplied" type="radio" name="app-already-applied" value="yes" id="app-already-applied-yes" already-applied />yes<br>
<input ng-model="application.alreadyAppliedWhat" type="text" placeholder="For what vacancy?" name="app-already-applied-what" id="app-already-applied-what" disabled />
<input ng-model="application.alreadyAppliedWhen" type="text" placeholder="When?" name="app-already-applied-when" id="app-already-applied-when" disabled />
</fieldset>
....
<input type="submit" ng-click="previous()" value="previous" />
<input type="submit" ng-click="finish()" value="save" />
</form>
</div>
</div>
</div>
This snippet is from the StepController which can be found in controllers.js:
function StepController($scope, $http, $routeParams)
{
$scope.step = 1;
$scope.next = function(){
$scope.step += 1;
window.scrollTo(0,0);
}
$scope.previous = function(){
$scope.step -= 1;
window.scrollTo(0,0);
}
$scope.finish = function(){
$http.post('new-submission', { id: $scope.job_id, application: $scope.application })
.success(function(data, status, headers, config){
window.location.href = data.redirect_url;
});
}
}
My main concern now is how to efficiently validate the specific form for each step when the "next" button is clicked.