AngularJS form validation

'novalidate' is used to disable browser's native form validation.

js:

var app = angular.module('app', []);
 
app.controller('appCtrl', 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();
});

css:

input.ng-invalid.ng-dirty {
    background-color: red;
    color: cyan;
}
input.ng-valid.ng-dirty {
    background-color: green;
    color: cyan;
}

html:

<section ng-app="app">
    <section ng-controller="appCtrl" class="well">
        <form class="form-horizontal" name="appFormName" novalidate>
            <div class="form-group">
                <label class="col-sm-2 control-label">Name (updateOn: 'mousedown blur')</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'mousedown blur' }" name="userName" class="form-control" required />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Email (updateOn: 'blur')</label>
                <div class="col-sm-10">
                    <input type="email" ng-model="user.email" ng-model-options="{ updateOn: 'blur' }" name="userEmail" class="form-control" required />
                </div>
            </div>
            <div class="alert alert-danger" ng-show="appFormName.userEmail.$dirty && appFormName.userEmail.$invalid">Invalid: <span ng-show="appFormName.userEmail.$error.required">Tell us your email.</span>
 <span ng-show="appFormName.userEmail.$error.email">This is not a valid email.</span>
 
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Gender</label>
                <div class="col-sm-10">
                    <input type="radio" ng-model="user.gender" value="male" />male
                    <input type="radio" ng-model="user.gender" value="female" />female</div>
            </div>
            <div class="form-group">
                <input type="checkbox" ng-model="user.agree" name="userAgree" required />I agree:
                <input ng-show="user.agree" type="text" ng-model="user.agreeSign" class="form-control" required />
            </div>
            <div class="alert alert-danger" ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button ng-click="reset()" ng-disabled="isUnchanged(user)" class="btn btn-default">reset</button>
                    <button ng-click="update(user)" ng-disabled="form.$invalid || isUnchanged(user)" class="btn btn-primary">save</button>
                </div>
            </div>
 
            <ul>
                <li ng-repeat="(key, errors) in appFormName.$error track by $index"><strong>{{ key }}</strong> errors
                    <ul>
                        <li ng-repeat="error in errors">{{ error.$name }} has an error: <strong>{{ key }}</strong></li>
                    </ul>
                </li>
            </ul>
 
 
        </form> <pre>form = {{user | json}}
master = {{master | json}}

html:

<section ng-app="app">
    <article ng-controller="appCtrl" class="well">
        <form class="form-horizontal" name="appForm" novalidate>
            <div class="form-group">
                <label class="col-sm-2 control-label">Number (min -  5; max - 20;)
                    <span class="label label-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty">hover to show errors</span>
                </label>
                <div class="col-sm-10">
                    <input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required />
                </div>
            </div>
            <div class="alert alert-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty">
                <ul>
                    <li ng-show="appForm.number.$error.required">this field is required</li>
                    <li ng-show="appForm.number.$error.number">should be number</li>
                    <li ng-show="appForm.number.$error.min">minimum - 5</li>
                    <li ng-show="appForm.number.$error.max">miximum - 20</li>
                </ul>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button ng-click="submit()" ng-disabled="appForm.$invalid" class="btn btn-primary">submit</button>
                </div>
            </div>
        </form>
    </article>
</section>

js:

var app = angular.module('app', []);
 
app.controller('appCtrl', function ($scope) {
 
});

css:

input.ng-invalid.ng-dirty {
    border-color: red;
    color: red;
}
input.ng-valid.ng-dirty {
    border-color: green;
    color: green;
}

Leave a Reply

Your email address will not be published. Required fields are marked *