Using an AngularJs directive to perform form validation on an input field

Question

Using an AngularJs directive to perform form validation on an input field

Currently, I am working on a project where there are multiple submit forms with similar fields. To streamline the process, I have made the decision to transfer some fields to directives.

Here is an example of the form:

<div loading class="col-sm-12" ng-controller="Controller">
        <form name="myForm" role="form" novalidate>
            <fieldset class="lines-header-border">
                <div class="col-sm-6">
                   <div class="form-group">
                       <label class="col-sm-4 control-label">Date</label>
                       <div class="col-sm-7">
                            <date-field 
                             model="myModel" 
                             date-picker-options="datePickerOptions"
                             for-name="date"
                             for-ng-class="myForm.date.$invalid"
                             is-required="true"/>

                       </div>
                     <div class="col-sm-4">
                    <input class="form-control" 
                           name="amount" 
                           ng-model="amount" 
                           ng-class="{ 'has-error' : myForm.amount.$invalid }" 
                           required/>
                </div>
                    </div>
            </fieldset>
        </form>
    </div>

Date field directive implementation:

.directive('dateField', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            model: '=',
            datePickerOptions: '=',
            isRequired: '@',
            forName:'@',
            forNgClass: '&'
        },
    template: '<input ui-date="datePickerOptions" type="date" name="{{forName}}" class="form-control"  ng-model="model" ng-class="{ \'has-error\' : forNgClass()}"  ng-required="isRequired"/>'
    };
});

Issue with validation during form submission: While other fields are being validated correctly upon form submission, the date field does not seem to be validating. I suspect that the problem lies in

for-ng-class="myForm.date.$invalid"

.

Any suggestions on how to address this issue?

javascript forms angularjs validation angularjs-directive

Answer 1

Answer №1

If you need to access the controller scope variable "myForm.date.$invalid" using the directive attribute "for-ng-class", you can set "@" for the directive scope variable "forNgClass" to enable two-way data binding. This way, when the input field is changed, the class will be updated accordingly.

scope:{
    .....
    forNgClass: "@"
    .....
}

I have created a simple example:

UPDATE: Angular cannot dynamically generate the name attributes of input elements. Therefore, we need to wrap the input element of dateField in an inner form (using the ngForm directive). For more information about nested forms in Angular, you can check the Angular documentation.

<!DOCTYPE html>
<html>

<head>
    <style>
        .has-error{
            background:#ccc;
            border: 1px solid red;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
    <script src="angular-ui-date.js"></script>
</head>

<body ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <form name="myForm" novalidate>
            <h2>Selected date: {{dateData}}</h2>
            <date-field model="dateData" is-required="true"></date-field>
            <date-field model="dateData2" is-required="true"></date-field>
            <h3>myForm is invalid?</h3>{{myForm.$invalid}}
        </form>
    </div>
    <script>
        angular.module("MyApp",['ui.date'])
        .controller("MyCtrl",function($scope){

        })
        .directive("dateField",function(){
            return {
                restrict: "E",
                replace: "true",
                template: '<ng-form name="subForm"><input ui-date ui-date-format="yy-mm-dd" type="date" ng-class="{\'has-error\':subForm.myDate.$invalid}" name="myDate" ng-model="model" ng-required="isRequired"/></ng-form>',
                scope:{
                    model: "=",
                    isRequired: "@"
                }
            };
        });
    </script>
</body>

</html>

Here is an Online demo for reference.

Answer 2

If you need to access the controller scope variable "myForm.date.$invalid" using the directive attribute "for-ng-class", you can set "@" for the directive scope variable "forNgClass" to enable two-way data binding. This way, when the input field is changed, the class will be updated accordingly.

scope:{
    .....
    forNgClass: "@"
    .....
}

I have created a simple example:

UPDATE: Angular cannot dynamically generate the name attributes of input elements. Therefore, we need to wrap the input element of dateField in an inner form (using the ngForm directive). For more information about nested forms in Angular, you can check the Angular documentation.

<!DOCTYPE html>
<html>

<head>
    <style>
        .has-error{
            background:#ccc;
            border: 1px solid red;
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
    <script src="angular-ui-date.js"></script>
</head>

<body ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <form name="myForm" novalidate>
            <h2>Selected date: {{dateData}}</h2>
            <date-field model="dateData" is-required="true"></date-field>
            <date-field model="dateData2" is-required="true"></date-field>
            <h3>myForm is invalid?</h3>{{myForm.$invalid}}
        </form>
    </div>
    <script>
        angular.module("MyApp",['ui.date'])
        .controller("MyCtrl",function($scope){

        })
        .directive("dateField",function(){
            return {
                restrict: "E",
                replace: "true",
                template: '<ng-form name="subForm"><input ui-date ui-date-format="yy-mm-dd" type="date" ng-class="{\'has-error\':subForm.myDate.$invalid}" name="myDate" ng-model="model" ng-required="isRequired"/></ng-form>',
                scope:{
                    model: "=",
                    isRequired: "@"
                }
            };
        });
    </script>
</body>

</html>

Here is an Online demo for reference.

Using an AngularJs directive to perform form validation on an input field

Answer №1

Similar questions

AngularJS: The requested resource does not have the "Access-Control-Allow-Origin" header

Using jQuery to target form elements that have a specific class assigned to them

A notification appears when the record is being inserted after clicking the button

Currently, I'm attempting to figure out a way to create a CSS string in my MVC ASP.NET project. Any ideas or suggestions are greatly appreciated

Exploring the process of generating multiple drop-down menu items in ASP.NET using AngularJS

Using JavaScript to Establish Default Homepage in FireFox and Internet Explorer

What is the best way to incorporate setTimeout in a loop using Coffeescript?

Error: Attempted to submit an invalid or unexpected input token

Move information from one page to another

Include a single element repeatedly on a single webpage

The contents of a JSON Object will not be logged by Node, no matter the approach

Script for running a React app with Prettier and eslint in a looping fashion

Unable to invoke the setState function within the onSubmit handler of Formik

Struggling to store information in a MongoDB database within my MEAN Stack project

Steps for implementing target='_blank' on a <Link> tag with more than just an <a> element inside

Automatically scroll the page upon loading if the user is at the top of the page

Strategies for injecting data into VueJS components after the page has fully loaded

Unable to locate the 'react-native' command, attempted various fixes but none were successful

Encountered an issue during Karma unit testing of an Ionic App: the error message [ng:areq] indicates that the argument 'StockCtrl' is not recognized as a function and is

Each $.each function varies based on the type of object it is iterating