Validation of Arrays in Angular Schema Form

Trying to create an array of distinct values through Schema Form appears to be a challenging task.

To simplify, let's examine this basic unique validator:

$scope.validateUnique = function(value) {
    console.log('running validation');
    var sameName = $scope.model.NoDuplicate.filter(function(item) {
        return item.key === value;
    });
    return sameName.length < 2;
}

Go to this Fiddle link and open your console.

Step 1: Add a new item named 1.

Step 2: Introduce a new item called 12.

Step 3: Insert a new entry labeled 123.

Step 4: Include a new item as 1234.

Everything seems fine up to this point.

Step 5: Modify the first item (1) to 1234, triggering an error message.

Step 6: Delete the last item in order to reestablish uniqueness for the initial item. Unfortunately, nothing happens. The array does not undergo revalidation upon removal of an item or when the submit button is clicked, which should trigger form validation.

Is this issue due to my mistake? Is there an error in my code example? Or could it indicate a bug in Schema-Form? How can I ensure the array is revalidated after removing an item or submitting the form? Thank you!

Answer №1

This issue has been resolved, although I must admit that I am not completely satisfied with the solution for fixing the broken Angular Schema Form array validation.

To address this issue, I have made an addition to the form directive:

$scope.$watch('formState', () => {
    TestStartActions.updateFormStateFromForm(newVal);
    angular.forEach($scope.testStartForm.$error.runtimeUnique, (field) => {
        field.$validate();
    });
}, true);

You can view a functioning example on this fiddle.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

When I have a jQuery click event assigned to a hyperlink that contains an image, each with separate ids, I expect clicking the hyperlink to trigger the code event.target.id, returning the hyperlink's id. However, it actually returns the image's i ...

There is an issue with Onsen-UI not being able to load <ons> tags when used in Meteor

I'm attempting to integrate avatars from the Onsen UI pattern list () into a Meteor app, but the <img> tags are not loading. Firebug shows a message from Onsen: Onsen UI requires jqLite. Load jQuery after AngularJS to resolve this error. Addi ...

Guide to declaring variables using jQuery

Currently tackling a school project, I stumbled upon some online example solutions and managed to decipher most of the code. However, there is one line that has me puzzled. var $newTweet = $('<div class=tweet></div>'); My assumption ...

obtain an inner element within a container using the class name in a div

I am attempting to locate a span element with the class of main-tag within a nested div. However, I want to avoid using querySelector due to multiple elements in the HTML file sharing the same class and my preference against using IDs. I realize there mig ...

What are the best methods for detecting an invalid URL?

Currently, I'm constructing a basic HTML website using Angular JS ui-router. To handle scenarios where users input invalid URLs like 'www.mysite/#/invalidUrl', I've set up a custom 404 page ('www.mysite/#/error/404') with the ...

Utilizing service-based global objects in Angular applications

Upon entry into my application, the GlobalApplicationController initializes several services that are utilized throughout the entire application, such as subscribing to sockets. It would be quite beneficial to have a CurrentUser object available - however, ...

Vuetify: Utilizing Time Range Inputs for Start and End Time

I am encountering some difficulty in identifying what I may have missed. I am dealing with 2 inputs: time, startTime, and endTime startTime <v-col cols="12" sm="6" md="2"> <v-menu ref="menu" ...

What is the best way to locate a user-provided string within word boundaries using JavaScript regex?

Employing JavaScript, I am currently searching a body of text. Users are given the option to input any string they desire, and then I aim to search for that specific string, ensuring it is considered a "whole word" located between boundaries. All I need i ...

Having trouble accessing functions within the webpack bundle

As someone new to the world of JS library development, I have embarked on a journey to achieve the following goals: Creating a library with TypeScript Generating a bundle using webpack5 Publishing the library to npm Utilizing the library in other projects ...

Tips for adjusting image and div sizes dynamically according to the window size

In my quest, the end goal is to craft a simplistic gallery that closely resembles this particular example: EXAMPLE: This sample gallery is created using Flash technology, but I aim to develop mine utilizing HTML, CSS & Javascript to ensure compatibil ...

Saving the id in a variable after triggering an AJAX request by clicking

I attempted to utilize an onClick event within the <a> element but it is not functioning as expected. I am aiming to capture the value 777 into a variable so that I can access it later in the code. My intention was to click on the image and have an ...

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

Having trouble setting the CSS width to 100%

Is there a way to assert the CSS width of an element in NightwatchJS to be 100% without hard-coding the value? Currently, when I attempt to do so, it fails and reports that the width is 196px. The specific error message is as follows: Testing if element ...

Exploring the method to deactivate and verify a checkbox by searching within an array of values in my TypeScript file

I am working on a project where I have a select field with checkboxes. My goal is to disable and check the checkboxes based on values from a string array. I am using Angular in my .ts file. this.claimNames = any[]; <div class="row container"> ...

I encountered a response error code 500 from the development server while using my emulator

As I embark on setting up the react-native environment for development, I encounter an error when executing the command react-native run-android. root@pc:~/l3/s2/DevMobMultipltm/Wakapp# ` A series of tasks are carried out including scanning folders for sy ...

IE is failing to trigger jAlert function

When I validate a text box by pressing the enter key on my keyboard, the validation works fine but the JAlert doesn't show up. However, when I call the same function on a button click, the alert shows in IE. I am quite confused by this behavior and wo ...

Experiencing difficulties when conducting a Karma test on an Angular service

My examination is: 'use strict'; (function() { describe('Service: Assessment', function () { var $httpBackend; // load the service's module beforeEach(module('mean')); var AssessService; beforeEac ...

"Encountering an error with an Ajax request while trying to call an ActionResult in

Utilizing Angularjs alongside asp.net MVC, I am attempting to save data via an Ajax request, however, I am encountering an error message. The browser is displaying "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" ...

Anchor tags created using JQuery will remain on the same page without redirecting

Presented below is the code I have utilized to construct the anchor tag along with its content. $('div#right-slide').html("<a href=\"http://www.XXXXXXXXXXXX.info/limited-specials/\" ><h1 id=\"specials\">Click Here ...

Suspend Coontact-Host Upload of Documents

Is there a way to pause or resume uploading, or resume a broken upload using PHP, JavaScript, or jQuery without having to rely on Java, Flash, or C-type programming? Perhaps utilizing PHP socket functions? ...