Array-based input validation

Is there a way to validate an input field against a list of strings in an array without using custom directives or patterns?

For example, if the array contains town, city, and house, then typing any of those words should result in a validation failure. Anything else should pass.

<input type="text" ng-not-in="r.arr" ...

r.arr = ["town", "city", "house"]

I know about using $watch, creating custom directives, or ng-pattern, but is there a built-in solution for this particular case? If not, which method would be the cleanest approach?

Thank you

javascriptangularjs

Answer №1

An alternative solution is to utilize the ui-validate feature from Angular UI. This eliminates the need for creating a custom directive each time, allowing you to simply use an expression instead (Refer to this example on JSFiddle):

    <input type="text" ng-model="mod.text" ui-validate="'list.indexOf($value)==-1'">

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

Determine the quantity of elements within a JSON object based on specified criteria

I am seeking a way to count the number of items in an array of JSON objects that meet specific conditions. The structure of my array is as follows: array = [{ name: 'Bob', age: 24 }, ...., { ...

javascriptjsonangularjs

Displaying items from an array is made easy thanks to the combination of mapGetters, VUEJS, vuex, and vuetify

My website has two main routes: one for the home page and another for a configuration panel. In the home page, there is a container displaying information such as date, time, current temperature, etc. Below that, there is another container where users can ...

javascriptvue.jsvuexvuetify.jsvue-router

What is preventing me from loading Google Maps within my Angular 2 component?

Below is the TypeScript code for my component: import {Component, OnInit, Output, EventEmitter} from '@angular/core'; declare var google: any; @Component({ selector: 'app-root', templateUrl: './app.component.html', st ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3angular

Can firebase and express be integrated seamlessly?

I'm a newcomer to Express and I want to create a REST API with express.js that utilizes Firebase as its database. Can these two technologies actually work together? Here is the code snippet I tried: cons ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

What is causing the issue with the code `exports = { z: function() {} };` not functioning as intended?

Script A exports = { z: function() { console.log('aZ'); } }; Script Main require('./a').z(); // error Have you ever wondered why require('./a') ends up returning an empty object? ...

javascriptnode.jscommonjs

Issue encountered while attempting to run Next.js application. Halts abruptly shortly after initialization

After installing the Next.js app, I encountered an issue where the app would not start and would stop immediately. My terminal displayed the following: PS D:\Nextjs\MyApp> npm run dev > dev > next dev ready - started server on 0.0.0.0: ...

javascriptnode.jsnext.jsserver-error

How to get an empty object as a response in a NODE.JS request?

For some reason, I am attempting to send an object to my backend. Even though I can retrieve valuable information from my network's payload, my req.body consistently returns an empty object. View my issue ...

javascriptnode.jsexpressrequestfetch

Having an issue with my Django model not properly saving data when receiving a POST

Just dipping my toes into the world of ajax and Django, so please bear with me for my messy code. I'm facing an issue where my Django model is not saving the response even after receiving a POST request. I'm attempting to create a simple like/di ...

javascriptpythondjangoajax

What could be causing the error message "setShowModal is undefined" to appear in my React project?

Here is the code snippet I am working on: import React, { useState } from "react"; import Modal from "./Modal"; function displayModal() { setShowModal(true); } export default function NewPostComponent() { const [showModal, setShowMod ...

javascriptreactjsreact-hooks

What is the correct way to reference this data element in Ajax?

I am attempting to retrieve the elevation data for 732 meters from the JSON API response below: {"results":1,"data":[{"wind":{"degrees":200,"speed_kts":6,"speed_mph":7,"speed_mps":3,&quo ...

javascriptjqueryjsonajax

Generate real-time dynamic line charts using data pulled directly from a MySQL database

I am in search of guidance on developing a real-time line chart that can dynamically update based on data fetched from MySQL. I need an example or reference on how to achieve this functionality without having to refresh the webpage every time new data is ...

javascripthtmlmysql

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

javascriptjqueryhtmltwitter-bootstrapdom

Send location data to the PHP server through AJAX and then fetch it in JavaScript once it has been handled

I am looking to transfer coordinates from client-side JavaScript to server-side PHP using Ajax, and then retrieve the processed result back to JavaScript for further use. While I have managed to pass the data to PHP successfully, I am struggling to figure ...

javascriptphpajax

Attempting to insert an element after the .load event has been triggered

I have been attempting to update the contents of ".myShop" after it's loaded from an external XML file, but without success. I believe my timing is correct, but I suspect that a loaded element may not be part of the DOM? Here's what I'm exp ...

javascriptjquery

Is NG-True-Value exclusively for string literals?

I am attempting to utilize the ng-true-value directive with expressions or objects: I experimented with these options: ng-true-value={{selection}} ng-true-value="selection" ng-true-value="{{selection}}" Unfortunately, none of these approaches h ...

angularjsangularjs-directive

Exploring methods for looping through deeply nested object attributes in AngularJS

Here is a sample JSON that I'm working with. I tried using ng-repeat="(key, value) as shown below to achieve the desired output, but it's not functioning correctly. <table border="1"> <tr ng-repeat="(key, value) in data1"> ...

angularjs

React - Issue with state not being updated accurately

My current project involves using the <Select> component from Material-ui to create a drop-down menu. I need to update the state of the <Select> component after a selection has been made. To achieve this, I have set the value property of the & ...

javascriptreactjs

Utilize jQuery to interact with a Web API web service

Okay, so go ahead and roast me in 27 different languages if you want, but here's my dilemma: I've delved into creating a web service using the .NET 4 Web API. I've coded a method named GetTransaction that simply returns a string. It's ...

javascriptjqueryajax

What is the best way to insert an image in front of text within a table cell that can be identified by its class name?

JavaScript Question: function addFlags(){ while(i < $('.tabledata').length){ var current_val = $('.tabledata').eq(i).text(); arr.push(current_val); $('.tabledata').eq(i).html("<img s ...

javascripthtmljquerycss

Three.js - Exploring the Significance of "THREE" within the THREE.scene Framework

Just starting out in JavaScript and experimenting with animations using three.js library. I'm trying to grasp the meaning behind: const scene = new THREE.Scene(); Why is the "THREE" necessary in THREE.Scene? Could we not simply write const scene = n ...

javascriptthree.jsscene