I am using Angular to validate a multi-page form consisting of HTML templates. Is there a way to selectively display specific error messages using $setValidity and ng-repeat with a string filter? If not, do you have any suggestions on how I can achieve this?
My goal is to capture errors, use $setValidity, and then show only certain error messages based on the page of the form where the error occurred.
Below is the Angular validation code snippet:
///TEAM DATA
if (!$scope.formData.TeamContactFirstName) {
$scope.signupform.$setValidity('TEAM: Please provide a Team Contact First Name', false)
$scope.failedForms.team = true;
isValid = false;
}
if (!$scope.formData.TeamContactLastName) {
$scope.signupform.$setValidity('TEAM: Please provide a Team Contact Last Name', false)
$scope.failedForms.team = true;
isValid = false;
}
//PROJECT BASICS
if (!$scope.formData.Title) {
$scope.signupform.$setValidity('BASICS: Please provide a project title.', false)
$scope.failedForms.basics = true;
isValid = false;
}
if (!$scope.formData.ProjectLocation) {
$scope.signupform.$setValidity('BASICS: Please provide the location of the project', false)
$scope.failedForms.basics = true;
isValid = false;
}
Here is the relevant repeater code for displaying errors:
<div ng-show="signupform.$invalid" class="alert-box alert radius">
<ul>
<li ng-repeat="(key, errors) in signupform.$error">
<ul>
<li ng-repeat="e in errors"><strong>{{ key }}</strong>.</li>
</ul>
</li>
</ul>
</div>
I am looking for a solution to only display the TEAM DATA errors within this repeater. Is there a way to apply a filter to achieve this?