Is it possible to create an array that contains references to the fields in a form (such as input, textarea, etc.) and then run a function on them in my code, like addClass()?
To clarify my objective - I am looking to add a red border color to any invalid inputs after the user submits the form (and triggers the submit() function in the controller).
ng-class="{'has-error':form.input.$invalid}"
Unfortunately, this approach is not yielding the desired results.
If you want to apply a condition to your input, you can use
ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"let myApp = angular.module('example', []);
myApp.controller('MainController', function($scope) {
$scope.value={};
});.has-error{
border-color:red;
}<!DOCTYPE html>
<html ng-app="example">
<head>
<meta charset="utf-8" />
<title>AngularJS Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c2d222b39202d3e62263f0c7d62796234">[email protected]</a>" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainController">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="HazardousMaterial" ng-model="value.type" required ng-class="{'has-error':myForm.$submitted&&myForm.HazardousMaterial.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.HazardousMaterial.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>Recently, I successfully created a custom button in JavaFX by tweaking the style of a simple button using the setStyle() method with different String parameters based on whether the button was clicked or not. I wanted to convert this customized button int ...
I've been struggling to save an Excel file using Javascript, but I'm facing compatibility issues with different browsers. I initially tried using BASE64 along with data URL, which worked well in Chrome and Firefox but failed in IE and Safari. ne ...
I've been experimenting with a marquee effect using vanilla JS. The effect is working, but I'm encountering some shaking issues with SVG and images as they move. <div class="marquee"> <h1>Nepal <svg version="1.1&qu ...
As a newcomer to css, I am struggling with adding margin-left to my paragraph and <h2>, and it's not taking effect. I have a 700px div and I want to add a 10px margin-left to both <p> and <h2> in relation to the image. Despite my e ...
Hello, I am working on creating a customized dropdown list similar to the one shown in the image. My goal is to have a select list with options that display both an image and the country name. However, my current code is not displaying the background imag ...
I'm attempting to conceal an option based on a certain condition, but the option still remains visible. Below is the code I am using: <li role="presentation"><a role="menuitem" tabindex="-1" ng-disabled="di ...
I'm currently tackling a project involving a push menu. When the content div slides over, the menu buttons come in with a slight animation as they appear on the screen. However, if the user rapidly opens and closes the menu multiple times, the items o ...
As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...
I just started reading an AngularJS book by O'Reilly and I encountered a problem with the first example. Instead of seeing "hello" as expected in place of "{{greeting.text}}", it displays exactly that. I have double-checked my angular linking and even ...
Having trouble adding a new row to the table in angularjs when clicking the add button. Here is the link to the Plunkr example -https://plnkr.co/edit/s7XAaG4JbvbTTxiZ0V2z?p=preview The HTML code snippet is as follows: <html> <head> <script ...
I am struggling to get the horizontal lines to work on my traffic light dashboard view for one of my website pages. Despite making multiple adjustments, it seems like I just can't get them to display correctly. Here is an example of what I want: View ...
What could be causing angular expressions within an element's attribute to evaluate as empty strings when there are multiple expressions present? In a specific scenario, I have an attribute with identical expressions that output scope variables. Howev ...
I have encountered an issue where this code works fine in all major browsers, but Edge only shows the valid value in the DOM inspector. The page still displays the old value. Why is this happening? (function (angular, module) { 'use strict'; ...
I am currently facing a challenge with a table that is generated server-side and then appended to the view page (client-side). Since the table is not directly included in the DOM, I am using the StickyTableHeaders jQuery plugin to create a sticky header fo ...
Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...
Here is a code snippet that displays a date time picker in a form using the angular-moment-picker plugin. The issue I encountered was that after selecting a date/time, the time shown in the input box would be correct, but upon form submission, the time sto ...
I am currently creating an Android application in Cordova Tools for Visual Studio using Ionic and AngularJS. My goal is to redirect to another HTML page once my function has completed its execution, but I'm having trouble getting it to work correctly ...
From my perspective : <span data-ng-init="fillEditForm['titi']='toto'" ></span> In my Angular controller : console.log($scope.fillEditForm); console.log($scope.fillEditForm['titi']); The outcome : Object { ti ...
Despite my efforts to find a solution on Stackoverflow, I have not been able to locate exactly what I need. I am trying to evenly space and center three columns across my page. However, when I assign col-md-4 to each column, they end up too close together ...
Is there a way to set different time spans for background images of a DIV? Has anyone tried using jQuery for this task? I'm looking to have the first image displayed for 20 seconds, then switch to the second image for 5 seconds. Is it possible to ach ...