Code Samples: dynamic required

Tuesday, December 13, 2016
Add remove required validation in angular dynamically in angular js

<!doctype html>
<html>
<head>
    <title>Add remove required validation in angular dynamically in angular js</title>
    <script src="http://code.angularjs.org/1.2.12/angular.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>

<div data-ng-app="myApp" data-ng-controller="MyController">
    <form name="myForm" method="get" validate-form novalidate>
        <div class="container">
            Type:
            <select ng-model="type" my-validation>
                <option value="required">Required</option>
                <option value="not_required">Not Required</option>
            </select>
        </div>
        <div class="container">
            Name:
            <input type="text" name="name" ng-model="name" ng-required="isFieldRequired()" my-validation/>
            <span ng-show="myForm.name.$invalid" style="color:red;font-size:30px;">*</span>
        </div>
        <div><input type="submit" value="Submit"/></div>
    </form>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("MyController", function($scope) {
        $scope.type = "required";
        $scope.isFieldRequired = function() {
            return $scope.type == "required";
        }
    });

    app.directive('validateForm', function () {
        return {
            restrict: 'A',
            link: function ($scope, form) {
                form.on('submit', function () {
                    $(form).find(".container").css("border", "");
                    if($scope.myForm.$invalid) {
                        var error = $scope.myForm.$error;
                         for (var key in $scope.myForm.$error) {
                             for (var index = 0; index < $scope.myForm.$error[key].length; index++) {
                                 var err = $scope.myForm.$error[key][index];
                                 console.log("Field=" + err.$name + ', Error=' + key);
                             }
                         }


                        var firstInvalid = $(form[0].querySelector('.ng-invalid'));

                        if (firstInvalid.length > 0) {
                            firstInvalid.closest(".container").addClass("error_element").css("border", "2px solid red");
                            firstInvalid.focus();
                            return;
                        }
                    }
                    console.log("Form Validated");
                });
            }
        };
    });

    app.directive("myValidation", function() {
        return {
            restrict: "A",
            require: "ngModel",
            link: function(scope, elem, attrs, ctrl) {
                console.log(attrs)
            }
        }
    })
</script>

</body>
</html>
Pages

Tuesday, December 13, 2016

Add remove required validation in angular dynamically in angular js
