Angularjs foem validation with diaabled fiels

by manoj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="UserCtrl">
        <form name="mod_user" novalidate>
            <input name="name" ng-model="name" placeholder="Name" required/>
            <div class="user-help" ng-show="mod_user.name.$dirty && mod_user.name.$invalid">Invalid:
            <span ng-show="mod_user.name.$error.required">Please enter your name.</span>
            </div>                
            <br/>    
            <input type="password" name="password" ng-model="password" placeholder="Password" ng-disabled="true" ng-required="false" required/>
            <div class="user-help" ng-show="mod_user.password.$dirty && mod_user.password.$invalid">Invalid:
            <span ng-show="mod_user.password.$error.required">Please enter a password.</span>
            </div>                
            <br/>    
            <input type="password" name="passwordConfirm" ng-model="passwordConfirm" placeholder="Confirm Password" ng-disabled="true" ng-required="false" required field-equal="password">
            <div class="user-help" ng-show="mod_user.passwordConfirm.$dirty && mod_user.passwordConfirm.$invalid">Invalid:
            <span ng-show="mod_user.passwordConfirm.$error.required">Please enter a password.</span>
            <span ng-show="mod_user.passwordConfirm.$error.fieldEqual">Passwords do not match.</span>
            </div>                
            <br/>
            <button class="button" ng-click="saveUser()" ng-disabled="mod_user.$invalid">Save</button>
        </form>
        <br/>
        Status: {{status}}
    </div>
</div>

CSS

input[type='text'] {
    margin-bottom: 2px;
    height: 22px;
    width: 250px;
}

input[type='checkbox'] {
    margin-bottom: 2px;
}

input.ng-invalid.ng-dirty {
    border: 2px solid #FA787E;
    background-color: #FFFF99;
}
input.ng-valid.ng-dirty {
    border: 2px solid #78FA89;
    background-color: #CCFF99;
}

.user-help {
    color: #FA787E;
    font-size: 12px;
}

JavaScript

var $scope;
var app = angular.module('myapp', ['myapp.directives']);

function UserCtrl($scope) {    
    $scope.saveUser = function() {
        $scope.status = "Saved";
    }
}

angular.module('myapp.directives', []).

   /*
     * Validate if two fields are equal (such as passwords match for example
     */
    directive('fieldEqual', [function() {
        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ctrl) {
                ctrl.$parsers.push(function(viewValue) {
                    ctrl.$setValidity('fieldEqual', true);
                    if(ctrl.$valid) {
                        scope.$watch(attr.fieldEqual, function() {
                            var compareValue = this.last;
                            if (viewValue !== compareValue) {
                                ctrl.$setValidity('fieldEqual', false);
                                return undefined;
                            } else {
                                ctrl.$setValidity('fieldEqual', true);
                                return viewValue;
                            }
                        });
                    }
                });
            }
        };
    }]);