ng-value malfunctioning and not functioning as expected

There seems to be an issue in Angular 1 with ng-value not working properly with ng-required. When you run the following code, it shows "The input field cannot be empty" even though it has the value of "John". However, when you enter a different value or remove something from the input field, the required message disappears.

Does anyone have a solution for this?

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

<form name="myForm">

Click here to make the input field required:

<div ng-app="" ng-init="firstName='John'">

<input name="myInput" ng-model="myInput" ng-value="firstName" ng-required="true">

<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>

</form>

</body>
</html>

Answer №1

The reason for the issue is due to utilizing myInput as the ng-model, which is initially set to undefined upon form initialization. To resolve this, consider using ng-init to assign a value to the ng-model in order to achieve the desired behavior (for example, setting "John" as the initial value):

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="">

<form name="myForm">

Click here to make the input field required:

<div ng-app="" ng-init="firstName='John'">

<input name="myInput" ng-model="firstName" ng-value="firstName" ng-required="true">

<h1 ng-if="!myForm.myInput.$valid">The input field cannot be empty</h1>

</form>

</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

Manipulating the "placeholder" attribute with Knockout.js and JSON data

Is it possible to use the placeholder attribute with data-bind? I am encountering an error message ([object object]). Can someone help me figure out how to properly utilize it? html: input id="comments" class="form-control" data-bind="attr: { placeholde ...

Click on the bootstrap carousel to dynamically load images

I am currently developing a website with numerous images, and in order to enhance loading time, I plan to have hidden images load when the user clicks on the cover image using JavaScript. Subsequently, these images will be inserted into a Bootstrap carouse ...

Having trouble retrieving accurate text information from a JavaScript link

I am encountering an issue with my code which consists of links with divs inside them. When I click on a link, it should display another div with data for "Case No" and "Type". However, the problem is that it only fetches the data from the first link click ...

Display the overlay solely when the dropdown is visible

My code works, but the 'overlay active' class only functions properly when I click on the button. If I click outside of the button, it doesn't work as intended. I want the 'overlay active' class to be displayed only when the dropd ...

Is it possible for a table row's cell to determine the value of the cell in the row above it?

Let me illustrate my issue with an example. Consider the following table: <table> <tr> <th>First</th><th>Second</th><th>Third</th> </tr> <tr> <td>A</td><t ...

Including a cancel button to close the open window

var messagebox = Ext.widget("messagebox", { target: grid, progressMessage: "Loading" }); The message box displayed above indicates the loading progress bar that appears when the download button is clicked. I am looking to incorporate a cancel button i ...

If the td element contains text, add a comma (,) and wrap the text in HTML tags. If there

Currently diving into some jQuery code and have come across a few uncertainties. Here is what I've managed to put together so far: var html = ''; data.entities.forEach(function (value, index, array) { html += index !== data.entities.len ...

The Step-by-Step Guide to Deselecting an Angular Checkbox with a Button

I currently have a situation where I have three checkboxes labeled as parent 1, parent 2, and parent 3. Initially, when the page loads, parent 1 and parent 3 are checked by default, while parent 2 is unchecked. However, when I manually check parent 2 and c ...

Update the document by sending the data and making changes based on the AJAX response

Currently, I am avoiding using jQuery and trying to work with the following code in PHP: <?php header ( 'Content-Type: text/xml; charset=utf-8' ); $con = @mysql_connect ( "localhost", "root", "" ) or die ( "Couldn't connect to database" ...

"The concept of hoisting in JavaScript and its impact on global

Is there a way to set the variable "username_show" from this PouchDB document? I attempted using hoisting, but it seems that I may need to move the global variable outside of the data structure and then outside of the function. var db = new PouchDB ...

Weird errors popping up when running npm build in ReactJS - lifecycle and export issues arise

Currently facing an issue while trying to build a React project using npm run build for creating a production build Running npm start works perfectly fine and compiles the react code without any issues npm run build - error https://i.sstatic.net/lMfbK.pn ...

What is the true appearance of Ajax?

After spending a few days researching Ajax to use with the Django Python framework, I came across numerous resources on the topic. 1. function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyStat ...

Discover the potential of JavaScript's match object and unleash its power through

In the given data source, there is a key called 'isEdit' which has a boolean value. The column value in the data source matches the keys in the tempValues. After comparison, we check if the value of 'isEdit' from the data source is true ...

Removing numerous key/value pairs from an object in real-time

Suppose I have an array of objects and I want to exclude certain keys/values. Instead of using the traditional delete method to remove one key/value pair, is there a way to specify which pairs I want to keep and remove all others? For example, in this ar ...

What is the best way to display two tables side by side in a Vue component?

I am working on a vue application with a photo collection feature. My goal is to display the photos in two tables per row, iterating through the entire collection. Here's an example of what I'm aiming for: <row> &l ...

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

Is there a way to enhance the visibility of numbers in this HTML/JavaScript list to show more than just two digits

This piece of code is embedded in an HTML file and functions correctly, however, when applied to a numbered list, it displays numbers from "00" to "99" repeatedly instead of continuing indefinitely until the end of the list: function search_animal() { ...

Assigning a variable in jQuery to a PHP variable that has not been defined can halt the script

Here is the code snippet for a document ready function: $(document).ready(function(){ var id = <?php echo "" ?>; alert('boo'); if(id!=0){ $(' ...

Is there a way to identify a visitor's country and automatically direct them to a relevant website?

Despite reading multiple answers, I am still unsure how to redirect my website's visitors based on their country. I have a basic understanding of HTML and JavaScript. Can someone kindly provide me with the code for this task? ...

Converting blobs to strings and vice versa in Javascript

After successfully converting a blob to a string using FileReader, the challenge now is to convert it back: var reader = new window.FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { base64data = reader.result; var blobToSend ...