Setting the default value for ngModel does not receive any information from the model

Question

Setting the default value for ngModel does not receive any information from the model

I am trying to populate a form with default values using the code below:

 <h3>ِStart Time</h3>
    <div class="row" >
      <div class="col">
        <label for="startTime">Hour(s) </label>
        <input type="number" [ngModel]="defaultSTime" class="form-control" name="StartTimeHour" value="card.startTime.getHours" id="startTime" min="0" max="23">
     </div>
        <div class="col">
            <label for="startTime">Minute(s) </label>
            <input type="number" [ngModel]= "defaultSMinute" class="form-control" name="StartTimeMin" value="card.startTime.getMinutes" id="startTime" min="0"max="59"> <!--input type can be changed accordingly-->
      </div>
    </div>


  defaultSTime = 'card.startTime.getHours' ;
  defaultSMinute = 'card.startTime.getMinutes';

The issue I'm facing is that, despite my efforts, the form fields remain empty. Any ideas on what might be causing this?

html css angular typescript

Answer 1

Answer №1

It looks like there may be a potential problem with the data types in your code. The defaultSTime and defaultSMinute variables are defined as strings, while the inputs are expected to be numbers.

If you want to extract numbers from the card object's startTime.getHours method, consider updating your definition like this:

defaultSTime = card.startTime.getHours();
defaultSMinute = card.startTime.getMinutes();

Answer 2

It looks like there may be a potential problem with the data types in your code. The defaultSTime and defaultSMinute variables are defined as strings, while the inputs are expected to be numbers.

If you want to extract numbers from the card object's startTime.getHours method, consider updating your definition like this:

defaultSTime = card.startTime.getHours();
defaultSMinute = card.startTime.getMinutes();

Answer 3

Answer №2

Here are some helpful tips for you:

[

If you want to create two-way binding, remember to use banana-in-a-box syntax with ngModel, like this:

[(ngModel)]= "defaultSMinute"

Your comments lack clarity on how you are constructing the Card object, but it seems like you may have overlooked the following:

getHours() ; // these are functions of date not properties

https://i.stack.imgur.com/EovCT.png

Answer 4

Here are some helpful tips for you:

[

If you want to create two-way binding, remember to use banana-in-a-box syntax with ngModel, like this:

[(ngModel)]= "defaultSMinute"

Your comments lack clarity on how you are constructing the Card object, but it seems like you may have overlooked the following:

getHours() ; // these are functions of date not properties

https://i.stack.imgur.com/EovCT.png

Setting the default value for ngModel does not receive any information from the model

Answer №1

Answer №2

Similar questions

What is the best way to insert more rows into a mat-table without disrupting the existing layout?

How can I convert a list of checkboxes, generated by ng-repeat, into multiple columns?

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Finding the div associated with the element that triggered an event

Regex for US zip code with an optional format

Create a solution that is compatible with both web browsers and Node.js

Exploring Angular 2's Internationalization Feature

When the fullscreen modal is opened, the initial image displayed is not the same as the one that was clicked on

Alter the background color of the text input when it is selected for exit

When interacting with a <select> element, the behavior of test script execution varies between Firefox and Chrome

Creating a TypeScript NPM package that provides JSX property suggestions and autocomplete functionality for Intellisense

Guide on deactivating the div in angular using ngClass based on a boolean value

show up on page where I am located, not just in the center

Transferring AgGrid context in a functional React component

"Uncovering the parent element with jQuery: A step-by-step guide

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

"Looking for a solution to the ESLint error related to 'no-unused-var' and Google Maps integration. How can I effectively resolve

Text area with a set height and expandable max-height - scrollable overflow

Using the CSS property 'clear' creates a significant gap in the layout

Accessing base class properties in Typescript: A comprehensive guide