AngularJs validate form with input field from directive

Question

I'm working on a project, which has similar submit forms, so I have decided to move some fields to directives.

Form example:

 <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:

.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"/>'
    };
});

Validation problem on submit: Other fields gets validated on form submit button click, but this date field isn't. I think that the problem is in for-ng-class="myForm.date.$invalid".

Any suggestions?

Chickenrice · Accepted Answer · 2014-06-15 10:31:53Z

1

In your case, you want to access the controller scope variable "myForm.date.$invalid" via the directive attribute "for-ng-class". Assign "@" to the directive scope variable "forNgClass" for two-way data binding. When the input field has been changed, the class will be updated accordingly.

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

I implemented a simple example:

UPDATE: Since angular can't dynamically generate the name attributes of input elements. We need to wrap the input element of dateField in an inner form (by using ngForm directive). You can refer to Angular Doc for more details about nested form in angular world.

<!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 a Online demo. You could refer to it.

edited Jun 15, 2014 at 10:31

answered Jun 13, 2014 at 6:33

Chickenrice

5,7372 gold badges24 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kuldarim Over a year ago

Thanks for the reply. But as I see you added name="myDate" to the template. Is it possible to use name="forName" . So it would refer to passed field name, not to the hard coded one?

Chickenrice Over a year ago

Unfortunately, Angular can't dynamically generate the name attribute of input elements. I've updated my answer and online demo. Maybe you can try to use nested form to solve your issue

kuldarim Over a year ago

Thanks for the advice, I consider using your suggestion. But for now I think I will use hard-coded name for smaller code complexity.

Collectives™ on Stack Overflow

AngularJs validate form with input field from directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related