Interactive ng-messages and validation

Question

Interactive ng-messages and validation

Validation rules have been set in JSON format and are stored within a factory service.

    "inputname":{
        "rule":{
            "required":"required", "ng-minlength":"3", "ng-maxlength":"16"
        },
        "error":{
            "required":"Name is required",
            "minlength":"Name must have at least 3 characters",
            "maxlength":"Name can have up to 16 characters"
        }
    },

The rules have been added to the input element using a custom directive with a compile function. As a result, form validation is now functioning correctly.

The goal now is to display any errors in a different section of the HTML.

To accomplish this, I would like to include <ng-messages> in the HTML by retrieving error messages from a service in JSON format.

What steps should be taken to properly showcase these errors on the page?

javascript json angularjs

Answer 1

Answer №1

I have successfully implemented a method to display error messages retrieved from a JSON file. Despite my input directives functioning properly for validation, this particular Answer focuses on the process of printing out error messages.

This code was specifically created for my own requirements. As a result, I introduced an additional directive in my HTML to specifically handle errors. While this solution works for me, I am open to suggestions for improvement if there is a more efficient approach available.

gb_dash.directive('formErrors', ['$compile', 'formRules', function($compile, formRules){
return{
    restrict: 'A',
    replace: false, 
    compile: function compile(element, attrs) {

        element.removeAttr("form-errors"); //prevent infinite loop
        element.removeAttr("set-type");
        element.removeAttr("form-name");

        formName = attrs.formName;
        rules = formRules.getAllRules(attrs.setType);
        console.log(rules);
        str ='';

        $.each(rules, function(inputName, value){
            str += '<ng-messages for="'+formName+'.'+inputName+'.$error" ng-if="'+formName+'.'+inputName+'.$touched || '+formName+'.'+inputName+'.$dirty">';

                $.each(value.error, function(key, value){
                    //console.log(key, value);
                    str+='<ng-message msg-bubble when="'+key+'">'+'<span class="label alert">'+value+'</span>'+'</ng-message>'
                });
            str += '</ng-messages>';
        });

        element.html(str);

    }
}

}]);

In this scenario, the factory formRules stores the rules and error information in JSON format.

Answer 2

I have successfully implemented a method to display error messages retrieved from a JSON file. Despite my input directives functioning properly for validation, this particular Answer focuses on the process of printing out error messages.

This code was specifically created for my own requirements. As a result, I introduced an additional directive in my HTML to specifically handle errors. While this solution works for me, I am open to suggestions for improvement if there is a more efficient approach available.

gb_dash.directive('formErrors', ['$compile', 'formRules', function($compile, formRules){
return{
    restrict: 'A',
    replace: false, 
    compile: function compile(element, attrs) {

        element.removeAttr("form-errors"); //prevent infinite loop
        element.removeAttr("set-type");
        element.removeAttr("form-name");

        formName = attrs.formName;
        rules = formRules.getAllRules(attrs.setType);
        console.log(rules);
        str ='';

        $.each(rules, function(inputName, value){
            str += '<ng-messages for="'+formName+'.'+inputName+'.$error" ng-if="'+formName+'.'+inputName+'.$touched || '+formName+'.'+inputName+'.$dirty">';

                $.each(value.error, function(key, value){
                    //console.log(key, value);
                    str+='<ng-message msg-bubble when="'+key+'">'+'<span class="label alert">'+value+'</span>'+'</ng-message>'
                });
            str += '</ng-messages>';
        });

        element.html(str);

    }
}

}]);

In this scenario, the factory formRules stores the rules and error information in JSON format.

Interactive ng-messages and validation

Answer №1

Similar questions

Error with Jquery authentication

Leverage identical functions across various arrays within an Angular directive

A guide on resolving the 'Unexpected identifier array in JSON Parse Error' encountered during an AJAX Request

What would be your suggestion for transferring data in text format between multiple programs?

Steps for displaying a website within a specific Div using HTML

Is the Javascript framework malfunctioning even though the code is identical to the one on jsfiddle

Selecting an option from the dropdown menu to automatically fill in a textbox within

Utilizing Symfony REST DTO validation and injecting it into the Model similar to a paramconverter

Incorporating jQuery into Rails 6.1

Is there a way to incorporate text at the end of a row in HTML?

Inform jQuery that the draggable element is in the process of being dragged dynamically

My Angular JS http.get request is failing to reach the specified URL

sorting through entries in a dictionary

Divide a column containing dictionaries into individual columns using pandas

Execute the extension exclusively within iframes

Learn how to implement data-binding in AngularJS using the ui-router and ControllerAs syntax, all without the

What causes objects to intersect in A-Frame even when they are seemingly distanced from each other?

Enable a click event within an iFrame by clicking on an element in the parent document

Can you explain how to create a function in Angular that accepts a number as an argument and then returns the square of that number?

Guide to utilizing sections within Angular