CODEWITHSUNDEEP
node.jsjsonangulartypescript
Mike Varela
Mike Varela

Reputation: 527

Angular: ngModel Interpolation returns NaN in input text box. How to show number

I'm returning an object from NodeJs/Mongo with some keys that have values with numbers. I'm using interpolation to show these values in an Angular template, a form specifically. The number values are showing up in the text boxes as 'NaN'.

I'm using Angular 8 and a NodeJS Express server. I've got a mongo database and an entry like the one below.

I'm attempting to show these values in several text input boxes using [ngModel] so clients can edit these values. However, when I use interpolation to show the values in the template, I get NAN as a value

this shows NaN in the text box. 

<div class="form-group">
     <label for="videoOffsets.prores-23976">23.976</label>
     <input type="number" class="form-control" name="videoOffsets"
                    [ngModel]="suite?.videoOffsets?.prores-23976">
</div>

RETURNED OBJECT FROM NODE / MONGO

{
    "scope": [
        "Mixing"
    ],
    "_id": "5d4d00827c213e60b8ed7c7w",
    "name": "4",
    "type": "audio",
    "videoOffsets": {
        "prores-23976": 2,
        "prores-24": 4,
        "prores-25": 13,
        "prores-2997": 11,
        "dnxhd-23976": 5,
        "dnxhd-24": 7,
        "dnxhd-25": 3,
        "dnxhd-2997": 1,
        "h264-23976": 22,
        "h264-24": 8,
        "h264-25": 31,
        "h264-2997": 5
    }
}

Upvotes: 3

Views: 906

Answers (1)

Akber Iqbal
Akber Iqbal

Reputation: 15041

the name of the field has a - which is causing this...

Change the old way (suite?.videoOffsets?.prores-23976): 

<input type="number" class="form-control" name="videoOffsets"
                [ngModel]="suite?.videoOffsets?.prores-23976">

into this new way (suite?.videoOffsets['prores-23976']): 

<input type="number" class="form-control" name="videoOffsets"
                [ngModel]="suite?.videoOffsets['prores-23976']">

as showed in this stackblitz also

Upvotes: 3

Related Questions