How to Toggle Div Visibility with AngularJS ng-show and ng-click

In order to eliminate error messages, I decided to clear the field with a button click. This approach successfully removed the error in my initial test.

<div class="errorPopup" 
data-ng-click="runner.Name = null" 
data-ng-show="mainForm.name.$error.pattern">
      <div class="triangle-down pull-left"></div>
      <span>Only letters allowed.</span>
</div>
<input ng-model="runner.Name" data-ng-patter="/(a-z)\" required />

However, I noticed that now I have to click once to clear the field and then twice before the error div is completely removed.

I am seeking a solution where I can get rid of both the field and the error div in a single click.

javascriptjqueryhtmlcssangularjs

Answer №1

Your code has a few issues that need addressing (assuming there is a wrapping form with the name mainForm):

  • The attribute data-ng-patter should actually be data-ng-pattern

  • The regular expression you are using is incorrect. To allow only lowercase Latin letters, use this pattern:
    /^[a-z]*$/

  • In order to check for an error in the input field (and reference it via mainForm.name.$error), the field must have a name. Since you are referring to it as mainForm.name, it needs a name attribute of name (which might not be clear). Choose a more descriptive name (e.g. runnerName) and utilize it like this:

<input type="text" name="runnerName" ... />

<div ... ng-show="mainForm.runnerName.$error">

If you address these issues, everything should work correctly!

For further demonstration, refer to this short demo.

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

Is it possible to incorporate Vue and Vuetify into an existing project that requires IE compatibility?

Currently in the process of enhancing a legacy project with new functionality. The front end is currently relying solely on jQuery for all the webpages. I have been tasked with adding another webpage and would like to incorporate Vuetify + Vue due to the i ...

javascriptvue.jsecmascript-6babeljsvuetify.js

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Having trouble making this work! I have included the $emit code in my click event to trigger a custom event. <h2 class="form_section--header">Business Hours - <a href="javascript:void(0)" v-on:click="$emit('addBusinessHours', null)"> ...

javascriptvue.js

Issue with Bootstrap 4 navbar functionality on smaller screens

I'm currently in the process of integrating a navbar that transforms the navbar choices into a dropdown menu on smaller screens (as illustrated in the documentation available here). However, I am encountering an issue where the button responsible for ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Angular2: using the #ngFor directive to assign a value to a component field

Here's a component I'm working with: @Component({ selector: "expenses-component", templateUrl: "expenses.html" }) export default class ExpensesComponent { private expenses: [] = [{name: "Foo", amount: 100}, {name ...

htmlangulartypescript

Utilizing AJAX for sending a data string and image file to a PHP server

Is it possible to include an image file in the dataString for a single function? Here is what I have: $.ajax({ type: "POST", url: "../insert.php", data: dataString, success: function(response){ console.log( ...

phpjqueryajaxfile

Having two ng-click events and two distinct classes in an ng-repeat based on the selected option

There are two buttons in my code that should remove a div within an ng-repeat loop. Depending on which button is clicked, a custom CSS class should be added to the effect. The CSS changes based on the option selected. When I click on a button, either &apo ...

javascripthtmlcssangularjs

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

javascriptcssreactjsreact-leaflet

After adding data to an empty array, index 0 becomes undefined for someEmptyArray

Currently, I am utilizing fs.readdir to generate an array of filenames within a specific directory. Additionally, I have implemented some regex functions to filter out undesirable filenames and/or filetypes. Upon executing the code provided below, I succe ...

javascriptarraysnode.jsundefined

Guidelines for transforming an HTML string into a JavaScript document

Is there a simplified method to transform an HTML string into JavaScript code that generates the same markup using the DOM? Something similar to: Input <div class="foo" tabindex="4"> bar <button title="baz">bar ...

javascripthtmldom

How can we verify email addresses and URLs in PHP? Let's discuss converting this validation process

After studying the code extracted from the jquery.validate plugin, I find it quite challenging to decipher. My goal is to convert this code into PHP and I would greatly appreciate any assistance in understanding each segment of the regular expression codes ...

phpjavascriptjqueryregexjquery-validate

Difficulty closing Modal Popup when multiple Modals are displayed simultaneously

I am facing a challenge with transitioning between modal screens When the button on the screen is clicked, Modal1 opens: $modal.open({ templateUrl: 'abc.html', controller: 'abcCtrl', size: 'lg', scope: $scope ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

The vanishing act: Semantic UI menu disappears when you click

My objective is to create a persistent left-side menu using Semantic-UI. I want to implement two different states for the menu - one with text for each item and another with an image for each item. However, I am facing some challenges that have me complete ...

javascriptjqueryhtmlcsssemantic-ui

Having issues with the Email type in the JQuery Validation Plugin?

Recently, I set up a Grunt file to consolidate all my libraries and code into a single JS file for inclusion in my website. However, after adding the JQuery Validate plugin (http://jqueryvalidation.org/), I noticed that it's not working as expected. I ...

javascriptjqueryjquery-validate

Uploading files in chunks using a combination of HTML, JavaScript,

I've been using a file chunking solution (although I can't recall its origin), but I've made some modifications to suit my requirements. Most of the time, the file uploads successfully; however, there are instances where an error occurs. U ...

javascriptphphtml

Adding app stylesheet in Django

I'm a bit unsure about how to incorporate CSS into my HTML. I have an app within my project that has its own template folder, and I would like to include the sample.css file in my HTML. I think it should be something like this: <link rel="styleshe ...

cssdjangodjango-templatesstatic-files

How can I retrieve the URL of the parent page from an iframe and save it in an input field

Hello, I'm having trouble accessing the parent page of an iframe using JavaScript. I've tried different methods but haven't found a solution that works well for me. I have one HTML page and another page with a form and buttons. I need the f ...

javascriptasp.netvb.netiframe

iPad is playing the incorrect file when using .play(). Any ideas on how to fix this issue?

Currently, I am developing a web application that involves a div element with dynamic text content that changes based on user interactions. To enhance the user experience, I decided to incorporate audio elements by creating an array containing correspondin ...

javascriptiosweb-applicationsaudio

Vue-Select Runs into Issue Generating Choices from an Array

As a novice in the world of Vue and Nuxt JS, I am currently immersed in learning and developing a simple web application with Nuxt JS. One specific challenge I am facing is creating a Vue Select option where I pass an array and have the options represent t ...

javascriptvue.jsvuejs2nuxt.jsvue-select

Finding elements in Vue.js and Nuxt.js without using querySelectorAll

Currently, my code includes: var images = Array.from(this.$refs["dynaContent"].querySelectorAll("img")); While this code functions properly on the webpage, there is an error log displayed in the terminal: ERROR [Vue warn]: Error in ne ...

javascriptvue.jsnuxt.js

Switching visibility in Angular

I need help toggling the visibility of a div in Angular. This is what my view looks like: <div ng-repeat="item in data | orderBy:'address' | groupBy:'address'" > <h5 onclick="toggle_visibility('item1');">{{it ...

angularjs