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 methods can I utilize from Google Maps within Vuex's createStore()?

Adding a sibling inline can be accomplished by simply using the "+"

Creating Unique Numbers for Every <a> Element

Determining the orientation of an image in JavaScript

Get rid of the white border surrounding the object tag

Is there a way for me to receive user inputs, perform mathematical operations on them, and then display the result of the calculation? Additionally, is there a way to ensure that the output value automatically updates

Changing the Class of an Element in a Different Component with Angular 2+

Tips for creating responsive designs with specific media queries for various device sizes

Picture in a clear background without any alteration

Navigating Routes with Router in Angular 7: A Step-by-Step Guide

Issues with manipulating state using TypeScript Discriminated Unions"Incompatibility with setState

Tips for enabling autoplay for videos in Owl Carousel

Move a Div to be positioned directly underneath another DIV

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

Guide to positioning text alongside icons with Bootstrap

Deploying a single Angular 5 project to various clients with unique URLs can streamline the development process

Utilizing AJAX for autocomplete in HTML and inserting it into a page using innerHTML is causing issues with the functionality of forms on the website

Convert JSON data to an array using Observable

Is there any re-rendering optimization feature in Angular 2?

Sliding off the canvas - concealed navigation