Troubleshooting issues with AngularJS ng-fab-form server errors

Question

Troubleshooting issues with AngularJS ng-fab-form server errors

Validation is being used on both the AngularJS side and server side to check for duplicate values, and I want to show these errors to users. Previously, without using ng-fab-form, I created a custom server error directive and implemented it like this:

<input type="number" id="level" name="level" ng-model="vm.record.level"
  server-error
  required>
<div ng-messages="vm.form.role_level.$error">
  <p ng-message="server">{{ vm.errors.level }}</p>
</div>

However, the main purpose of the library is to eliminate this repetitive process. With the use of "Controller as" syntax, I assign errors to each field when there are issues saving or updating the model:

angular.forEach(result.data.errors, function (errors, field) {
  vm.form[field].$setValidity('server', false);
  vm.errors[field] = errors.join(', ');
});

I have customized the validation template to display messages for server errors, but I am struggling to show dynamic error text. It seems to be related to scope inheritance. Any suggestions on how I can achieve this desired effect?

javascript angularjs forms validation

Answer 1

Answer №1

Here is a way I discovered to achieve this:

Include a custom attribute to store the server error message and keep an eye on any errors.

<input type="number" id="level" name="level" ng-model="vm.record.level"
  validation="{{ vm.errors.level }}
  server-error
  required>

In the validation template, show the value of the attribute.

<li ng-message="server">{{ attrs.validation }}</li>

Answer 2

Here is a way I discovered to achieve this:

Include a custom attribute to store the server error message and keep an eye on any errors.

<input type="number" id="level" name="level" ng-model="vm.record.level"
  validation="{{ vm.errors.level }}
  server-error
  required>

In the validation template, show the value of the attribute.

<li ng-message="server">{{ attrs.validation }}</li>

Answer 3

Answer №2

Consider utilizing $asyncValidators over $setValidity from [email protected].

app.directive('username', function($q, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
    var usernames = ['Jim', 'John', 'Jill', 'Jackie'];

      ctrl.$asyncValidators.username = function(modelValue, viewValue) {

        if (ctrl.$isEmpty(modelValue)) {
          // consider empty model valid
          return $q.when();
        }

        var def = $q.defer();

        $timeout(function() {
          // Mock a delayed response
          if (usernames.indexOf(modelValue) === -1) {
            // The username is available
            def.resolve();
          } else {
            def.reject();
          }

        }, 2000);

        return def.promise;
      };
    }
  };
});

(excerpt sourced from the documentation)

You can easily include the message in your custom validations template as follows:

angular.module('exampleApp', [
    'ngFabForm'
])
    .config(function (ngFabFormProvider)
    {
        ngFabFormProvider.extendConfig({
            validationsTemplate : 'path/to/your-fabulous-validation-template.html'
        });
    });

And within the template, add:

<li ng-message="username">I'm not valid!!! ;(</li>

An related issue was documented on the module's github page: https://github.com/johannesjo/ng-fab-form/issues/34

To improve this solution further, an interface is needed. While it currently doesn't exist, you have the option to raise an issue for consideration.

Answer 4

Consider utilizing $asyncValidators over $setValidity from [email protected].

app.directive('username', function($q, $timeout) {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
    var usernames = ['Jim', 'John', 'Jill', 'Jackie'];

      ctrl.$asyncValidators.username = function(modelValue, viewValue) {

        if (ctrl.$isEmpty(modelValue)) {
          // consider empty model valid
          return $q.when();
        }

        var def = $q.defer();

        $timeout(function() {
          // Mock a delayed response
          if (usernames.indexOf(modelValue) === -1) {
            // The username is available
            def.resolve();
          } else {
            def.reject();
          }

        }, 2000);

        return def.promise;
      };
    }
  };
});

(excerpt sourced from the documentation)

You can easily include the message in your custom validations template as follows:

angular.module('exampleApp', [
    'ngFabForm'
])
    .config(function (ngFabFormProvider)
    {
        ngFabFormProvider.extendConfig({
            validationsTemplate : 'path/to/your-fabulous-validation-template.html'
        });
    });

And within the template, add:

<li ng-message="username">I'm not valid!!! ;(</li>

An related issue was documented on the module's github page: https://github.com/johannesjo/ng-fab-form/issues/34

To improve this solution further, an interface is needed. While it currently doesn't exist, you have the option to raise an issue for consideration.

Troubleshooting issues with AngularJS ng-fab-form server errors

Answer №1

Answer №2

Similar questions

Ensure that the headers of the table are properly aligned with the

Utilizing a static method from a Class imported from a Node.js module

Trigger an Ajax function using a button within a Bootstrap modal

The function loops through an array of objects and combines specific properties from the objects into a single string

Node.js web server becomes inactive when not actively used

When trying to access the Nodejs http://test.dev:3000/api/profile API, I encountered an issue where there was no 'Access-Control-Allow-Origin' header for the Origin 'http://localhost:9000'

What is the best way to choose an item from a dropdown menu using JavaScript?

I am encountering a situation where the model.findOne() method in my Node.js application is unexpectedly returning null, despite the

Changing the bootstrap popover location

Efficiency of Promise-based parallel insert queries in MySQL falls short

The JQuery function .load() is not functioning correctly

Tips for accessing session values in client-side code without echoing them out

Utilize data from two distinct JSON sources that are updated at varying intervals, and display the combined results in an ng-repeat

Promise rejection caused by SyntaxError: Unexpected token i found in JSON at position 0 while trying to fetch a raw file from Gitlab

What is the best way to incorporate the ion scroll directive into a div element?

The Vuetify treeview displayed all objects as open, even though I had not enabled the "open-all" option

Playing back an Audio object using JavaScript

Enhance efficiency of repetitive tasks involving accessing the Mongo database

Using AJAX to send a POST request with an array

Angular ensures that the fixed display element matches the size of its neighboring sibling