Display data only when the user interacts with the input field - AngularJs

I am currently working on a program that requires the input data to only show if the input field is touched once. Unfortunately, I am not getting the expected result as nothing is displayed in the span tag (and there are no errors in the console). Can someone offer some assistance?

HTML:

<html>
<head>
    <!-- Script Files --> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <input type="text" name="person" ng-model="name"/><span ng-show="person.$touched">{{name}}</span>
    <script>
    //module declaration
    var app = angular.module('myApp',[]);
    //controller declaration
    app.controller('myCtrl', function($scope) {
        $scope.name = "Enter Name";
    });
    </script>
</body>
</html>

Note:

In this specific page, I am unable to utilize any form element. I need to trigger the ng-show event based on ng-touched, ng-untouched, ng-prestine, but without wrapping it within a form.

Answer №1

If you're primarily concerned with the form tag, utilizing the ng-form attribute is a viable option.

<html>
<head>
<!-- Include Script Files -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
 <div ng-form name="myForm" id="myForm">
  <input type="text" name="person" ng-model="name"/>
  <span> {{myForm.person.$touched}}</span>
 </div>
 <script>
 // Define module
 var app = angular.module('myApp',[]);
 // Define controller
 app.controller('myCtrl', function($scope) {
    $scope.name = "Enter Name";
});
</script>
</body>
</html>

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

Self-contained VUE app

Can Vue.js be built as a standalone application so that I am not reliant on backend services from my web hosting provider? In essence, I would like to avoid having to start up the app through npm and instead simply open the index.html file from the dist f ...

How to eliminate excess white space on the right side in Bootstrap 4

Could someone please clarify why I am experiencing a white space on the right side when using Bootstrap 4? This is the primary code block for the page. <main id="intro" role="intro" class="inner text-center"> <h2>Lorem Ipsum</h2> ...

Avoid causing the newline character to display

var i = 'Hello \n World' console.log(i) /* Output: Hello World */ /* Desired output: Hello \n world */ var j = 'javscr\u0012ipt' console.log(j) /* Output: javscr ipt */ /* Desired output: javscr\u0012ipt */ ...

Enhance event handling in Google Maps JS API v3 by setting priorities on event listeners

Is there a way to subtly prioritize event listeners without changing the order they were added in? See code snippet: var listener1 = function () { console.log('@listener1'); }, listener2 = function () { console.log(' ...

Having trouble integrating jQuery ui with webpack

I'm having difficulty integrating jQuery UI into my project using webpack. While jQuery is functioning properly, I encounter a warning when navigating to a page that requires jQuery-UI: jQuery.Deferred exception: $(...).draggable is not a function T ...

Adjust the text size for groupBy and option labels in Material UI Autocomplete without altering the size of the input field

Currently, I am utilizing Material-UI and ReactJS to implement grouped autocomplete functionality. See the code snippet below: import * as React from "react"; import TextField from "@mui/material/TextField"; import Autocomplete from &q ...

Is it possible to validate link clicks and integrate PHP within JavaScript functions?

Before anyone mentions security concerns, please refrain. Imagine I have an index.php. This page contains several links to 'home.php', each with different data stored in the href attributes. For example: Link 1: 'home.php?data=1&count ...

Chrome tab freezes when scrolling with the mouse

Working on a particularly interesting bug, I've managed to replicate it using a fiddle. The issue arises when the middle mouse button is clicked over the div element containing text, causing the pointer to become stuck. Is this possibly a browser bug ...

Displaying validation messages using Angular JS

Within my HTML code, I have a field defined as follows: <label for="firstname" class="field prepend-icon" ng-class="{ 'state-error': submitted && helpForm.firstname.$error.required }"> <input type="text" name="firstname ...

Reply in Loopback on remote method beforeRemote hook is to be sent

In my application, I am utilizing loopback v3. The specific use case I am tackling involves validating the presence of a token in the request header. If the token is invalid, I need to send an appropriate message in a standardized format. My approach has b ...

InvalidMethodError: Offspring cannot be invoked as a function

Provided below is the code for editing the onsubmit function in my create category javascript file. The objective is to capture user data and store it in a Firebase database. import React, { Component } from 'react'; import Dropzone from 'r ...

Could the jQuery not be running due to the .htaccess file? How can I resolve this issue?

Good Day, I am encountering a persistent pop-up issue with my Joomla! template, displaying only the word "here" in the browser as shown in this Screenshot After investigating, it was suggested that the .htaccess file may be responsible for this behavior. ...

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

three.js: Converting 2 directional vectors into either 3 rotations or a matrix

My coding system consists of 2 unit vectors labeled 'Ox' and 'Oy', 1 insertion point, and nearby is an 'Oz' vector that always appears to be {0 0 1}. For instance (after 2 rotations): Ox:{x: 0.956304755963036, y: -0.29237170 ...

The challenge of accessing controllerAs variables/objects in AngularJS custom directives

After deciding to refactor my code and move DOM manipulation and functions into directives instead of controllers, I encountered an issue with accessing variables/objects defined using the controllerAs 'this' syntax. Despite trying to use bindToC ...

What is preventing the factory from gaining access to the controller?

I have set up a notification factory and passed it inside the controller. However, when I try to assign the factory to the scope within the controller, I am encountering an error. alertsManager MyApp.factory('alertsManager', function() { ...

Javascript function that sets the opacity to 0

Hello everyone, I'm new to SO and seeking some guidance on improving my post! I have a function that sets the opacity of an element to 0 in order to clear it. While this works fine, it becomes burdensome when dealing with multiple elements that requi ...

Save modified content in CKEditor to an HTML document

Currently, I am utilizing the Ajax success function to dynamically load the content from an HTML file into CKeditor. function retrieveFileContent(fileUrl) { $.ajax({ url: fileUrl, success: function (data){ ...

Oops! Looks like there's a problem with the syntax - the import statement can't be

I encountered an error while trying to create Sequelize migrations in my Node.js app (which is set up with Typescript). When running npx sequelize-cli db:migrate, I received an "import method" error, but I'm unable to pinpoint the source of this issue ...

Utilizing Ajax and JQuery to invoke a PHP function with parameters

Seeking to implement a record deletion feature using JQuery/Ajax in order to avoid the need for page reload every time a delete action is performed. I have a Movie.php file which acts as a model object for Movie and contains a function called delete_movie ...