angular form

angular表单验证

by creeper ya

HTML

<div ng-app='myApp'>
    <div ng-controller="ExampleController">
        <form name='form' novalidate class="css-form">Name:
            <input type="text" ng-model="user.name" name="uName" required />
            <br />E-mail:
            <input type="email" ng-model="user.email" name="uEmail" required />
            <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid: <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
 <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
            </div>
            
            <br />Gender:
            <input type="radio" ng-model="user.gender" value="male" />male
            <input type="radio" ng-model="user.gender" value="female" />female
            <br />
            
            <input type="checkbox" ng-model="user.agree" name="userAgree" required />I agree:
            <input ng-show="user.agree" type="text" ng-model="user.agreeSign" required />
            <br />
            <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
            
            <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
            <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
        </form> <pre>form = {{user | json}}</pre>
 <pre>master = {{master | json}}</pre>

    </div>
</div>

CSS

.ng-scope {
    padding: 4px;
    background-color: #ddd;
}
.css-form input.ng-invalid.ng-dirty {
    background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
    background-color: #78FA89;
}

JavaScript

angular.module('myApp', [])
    .controller('ExampleController', ['$scope', function ($scope) {
    $scope.master = {};

    $scope.update = function (user) {
        $scope.master = angular.copy(user);
    };

    $scope.reset = function () {
        $scope.user = angular.copy($scope.master);
    };
        
    $scope.isUnchanged = function(user) {
      return angular.equals(user, $scope.master);
    };

    $scope.reset();
}]);