Issue with Angular ng-Model not appearing on the second attempt

Question

Issue with Angular ng-Model not appearing on the second attempt

Within a modal popup that appears based on certain conditions, everything functions normally the first time it is displayed.

The code in question is as follows:

<div class="form-group">
    <p>First Name:</p>
    {{vm.user.name_first}}
    <input type="text" class="form-control" ng-model="vm.user.name_first" name="firstName" required />
</div>

Upon reopening the modal after closing it, the text below the p tag displays correctly. However, the ng-model, which contains the same content as the text after the p tag, shows the input field empty instead of displaying the content from vm.user.name_first.

What could be causing this issue to occur only on the second instance?

javascript angularjs angular-ngmodel

Answer 1

Answer №1

Give this a try:

<div class="input-group">
<p>Your Name:</p>
{{vm.user.fullName}}
<input type="text" class="form-control" ng-model="vm.user.fullName" name="fullName" ng-model-options="{ getterSetter: true }" required />

Here's why:

Using a getter/setter function with ngModel can be beneficial in certain scenarios. A getter/setter is a function that retrieves the model's value when called without arguments, and updates the internal state of the model when given an argument. This approach is valuable for models with an internal representation different from what is displayed in the view.

Check out the AngularJS documentation for more information on ngModel implementation.

Answer 2

Give this a try:

<div class="input-group">
<p>Your Name:</p>
{{vm.user.fullName}}
<input type="text" class="form-control" ng-model="vm.user.fullName" name="fullName" ng-model-options="{ getterSetter: true }" required />

Here's why:

Using a getter/setter function with ngModel can be beneficial in certain scenarios. A getter/setter is a function that retrieves the model's value when called without arguments, and updates the internal state of the model when given an argument. This approach is valuable for models with an internal representation different from what is displayed in the view.

Check out the AngularJS documentation for more information on ngModel implementation.

Issue with Angular ng-Model not appearing on the second attempt

Answer №1

Similar questions

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Using Javascript to redirect to a link using JSON

The powerful combination of AngularJS and PHP's json_encode functionality provides a robust solution

Ways to implement a parallax effect by changing images within a specific div on scrolling with the mouse

When sending a form with a POST request in NODE, the data can be missing

Comparing Arrays with jQuery

Ways to transfer data between Angular controller and jQuery

Tips on modifying classes within specific sections of HTML tables

What could be causing Vue Router to only load after I click a link and then refresh the entire webpage?

Next.js does not support Video.js functionality when using server side rendering

Unsuccessful translation of HTML symbol codes within a toggle function using jQuery

What is the best way to link this information to access the data attribute?

Finding the earliest and latest dates from an event list in Angular can be accomplished by sorting the dates and

Swapping out characters that are not numerical within a text input field

% unable to display on tooltip pie chart in highcharts angular js

Utilizing the bind() method in a specific context

Having trouble converting binary data to base64 using GridFS-stream

Invoking a JavaScript function to retrieve an array of integers from a C# method for organizing columns in datatables.net

Using Laravel and vue.js to convert values into an array

Angular is able to select an element from a specified array