Angular show NaN value into inputs

angularjs input angular-ngmodel

11,768

To achieve your expected result use below options

Option1 :
1, Change input type to text
2.Check type of input,if string set default value of input to 'NaN'

HTML:

<html>

<body>
<div ng-app="myApp" ng-controller="myCtrl">

<input type="text" id="calcmouldSugNOfCavitiesCost" disabled

     ng-model="sugNOfCavitiesCost">

</div>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sugNOfCavitiesCost ='123';
  if(typeof($scope.sugNOfCavitiesCost)=='string'){

    $scope.sugNOfCavitiesCost ='NaN';

  }

});

Codepen- http://codepen.io/nagasai/pen/jAYoxv

Option2:

To achieve expected result with existing code- input field as number, add one more text field to display 'NaN' incase of string values and using ng-show and ng-hide display input fields according to the value

HTML:

  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="number" id="calcmouldSugNOfCavitiesCost" disabled ng-model="sugNOfCavitiesCost" ng-hide="toggle">
    <input type="text" disabled value="NaN" ng-show="toggle">
  </div>

JS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.sugNOfCavitiesCost ='123';
  if(typeof($scope.sugNOfCavitiesCost)=='string'){
    console.log($scope);
    $scope.toggle =true;
    }

});

Codepen- http://codepen.io/nagasai/pen/xOpNrw

11,768

Author by

Giovanni Far

IT Engineer - Full Stack Web Developer

Updated on July 26, 2022

Comments

Giovanni Far almost 2 years
I figure out that by default Angular with the ng-model directive doesn't show the NaN value into an input:
```
<input type="number" class="form-control" id="calcmouldSugNOfCavitiesCost" disabled
     step=0.01
     ng-model="$parent.mouldTAB.sugNOfCavitiesCost">
```
so if $parent.mouldTAB.sugNOfCavitiesCost is equal to NaN the input is empty.

Instead of this behaviour i would like to show NaN.

it's possible ?