0

I am trying to build some custom directives for inputs with validations provided by ngMessages directive. Still, I can't link multiple variables from $scope to dynamically determine the form name and the input name. Here's my code so far:

The directive:

app.directive('textBox', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            label: "@",
            fieldName: "@",
            bindTo: "="
        },
        require: "^form",
        templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
        link: function (scope, element, attrs, ctrl) {
            $scope.formName = ctrl.$name;
        }
    };
}]);

The template:

<div>
    <label>{{label}}</label>
    <input type="text" name="{{fieldName}}" ng-model="{{field}}" required />
    <div ng-messages="{{formName}}.{{fieldName}}.$error">
        <div ng-message="required">You left the field blank...</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
        <div ng-message="email">Your field has an invalid email address</div>
    </div>
</div>

The usage:

<text-box bind-to="myField" field-name="myField"></text-box>

The issues I encounter are related to the ng-messages attribute value. Doesn't seem to work when I use curly braces and it renders the text "formName.fieldName.$error" if I don't. The other issue is related to the ng-model, the same scenario applies.

Thank you!

1 Answers1

0

You can pass the formController, ctrl in your link method to directive scope like scope.form = ctrl;.

Then you can add <div ng-messages="form[fieldName].$error"> to access the $error property.

Curly braces are only required for the name of the input field. For ng-model you can directly add the model with-out curlies because ng-model requires two-way binding to work.

Please have a look at the demo below or this jsfiddle.

angular.module('demoApp', ['ngMessages'])
 .controller('mainController', MainController)
    .directive('textBox', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            label: "@",
            fieldName: "@",
            bindTo: "="
        },
        require: "^form",
        templateUrl: '/WebClient/Directives/TextBox/textBoxTemplate.html',
        link: function (scope, element, attrs, ctrl) {
            //$scope.formName = ctrl.$name;
            scope.form = ctrl;
        }
    };
}]);
    
function MainController($scope) {
 $scope.myField = 'test';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-messages.js"></script>

<div ng-app="demoApp" ng-controller="mainController">
    <form name="testForm">
        <text-box bind-to="model" field-name="myField"></text-box>
    </form>
    
    {{model}}
    
    
    <script type="text/ng-template" id="/WebClient/Directives/TextBox/textBoxTemplate.html">
    <div>
    <label>{{label}}</label>
    <input type="text" name="{{fieldName}}" ng-model="bindTo" required />
    <div ng-messages="form[fieldName].$error">
        <div ng-message="required">You left the field blank...</div>
        <div ng-message="minlength">Your field is too short</div>
        <div ng-message="maxlength">Your field is too long</div>
        <div ng-message="email">Your field has an invalid email address</div>
    </div>
</div>
    </script>
</div>
AWolf
  • 8,770
  • 5
  • 33
  • 39