Cleaning up validation logic - angularjs

Question

I've just got validation working the way I want with the following code:
<div class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }">
<label for="name" class="control-label">Company Name:</label>
<input type="text" name="name" ng-model="account.name" ng-maxlength="50" required />
<span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.maxlength">Name too long</span>
<span class="help-inline" ng-show="(submitted || accountForm.name.$dirty) && accountForm.name.$error.required">Required</span>
</div>
But there seems to be a lot of similar code with only slight differences. What would be the best method of simplifying this to make it a) clearer, b) more maintainable?
Update 23/07 Doesn't seem like there's an immediate best practice.

Answer 1

You could make an error variable in the $scope of the controller that controls that template. Something like this:
html
<div ng-controller="FormCtrl" class="control-group" ng-class="{ error : (submitted || accountForm.name.$dirty) && accountForm.name.$invalid }">
<label for="name" class="control-label">Company Name:</label>
<input type="text" name="name" ng-model="account.name" ng-maxlength="50" required />
<input type="button" ng-click="submitForm()" />
<span class="help-inline">{{ error }}</span>
</div>
controller
window.FormCtrl = function ($scope) {
$scope.error = "";
$scope.submitForm = function() {
if ($scope.accountForm.name.length > 50) {
$scope.error = "Name too long";
}
else if ($scope.accountForm.name == null || $scope.accountForm.name == undefined) {
$scope.error = "Name required";
}
else {
$scope.error = "";
//submit logic
}
}
}

Answer 2

Since you want to reuse the same code for other form fields, and the validation logic seems to be similar for each of them, i could not find anything with ngForm that would help reuse the code. Rather I would suggest a different approach, where you don't use ngForm and do the validation in js yourself. This way you can reuse the method everywhere.
Here is the link for the jsFiddle:
http://jsfiddle.net/rCDg8/1/
<div ng-app>
<div ng-controller="DemoCtrl">
<form name="accountForm" ng-submit="submit()">
<div class="control-group" ng-class="class">
<label for="name" class="control-label">Company Name:</label>
<input type="text" name="name" ng-model="account.name" ng-change="validateEntry(account.name)" required></input>
<span class="help-inline" ng-show="accountForm.$dirty||accountForm.$invalid">{{msg}}</span>
</div>
</form>
</div>
</div>
Controller:
function DemoCtrl($scope) {
var longName = 'Name too long';
var nameRequired = 'Name is required!';
$scope.class = '';
$scope.showMsg = false;
$scope.validateEntry = function (validateItem) {
if (angular.isDefined(validateItem)) {
if (validateItem.length > 50) {
showErrorMsg(longName);
} else if (validateItem.length === 0) {
showErrorMsg(nameRequired);
} else {
$scope.class = '';
$scope.showMsg = false;
$scope.accountForm.$dirty = false;
$scope.accountForm.$pristine = true;
}
} else {
showErrorMsg(nameRequired);
}
};
$scope.submit = function(){
alert('IS Form Dirty: '+$scope.accountForm.$dirty);
};
function showErrorMsg(msg) {
$scope.class = 'error';
$scope.showMsg = true;
$scope.msg = msg;
$scope.accountForm.$dirty = true;
}
};