CODEWITHSUNDEEP
javascriptangularjs
ChrisM
ChrisM

Reputation: 716

Angular - Populating form with Model - Type Number not working

Im creating an edit view that should fill with the data from ng-init="findOne().

It seems to get everything except the price input which is the only number input form.

Is there anything special about the type="number" that it wont use the model="saving.price" yet for example it will fill the model="saving.retailer" box which is type="text".

Heres the View Code

        <!-- Retailer Box Start-->

          <div class="form-group new-deal-form"
               ng-class="{ 'has-error' : createSavingForm.title.$invalid && submitted}" show-errors>
            <label for="retailer">Retailer</label>
            <input name="retailer" type="text" ng-model="saving.retailer" id="retailer" class="form-control"
                   placeholder="Retailer" required>
            <div class="sub-label">Enter the Retailer of the Deal.</div>
            <div ng-messages="savingForm.savingsCTRL.retailer.$error" role="alert">
              <p class="help-block error-text" ng-message="required">Retailer is required.</p>
            </div>
          </div>

          <!-- Retailer Box End-->

          <!-- Price Box Start-->

          <div class="form-group new-deal-form"
               ng-class="{ 'has-error' : createSavingForm.title.$invalid && submitted}" show-errors>
            <label for="price">Price(Euro)</label>
            <input name="price" type="number" ng-model="price" id="price" class="form-control" placeholder="Price"
                   required>
            <div class="sub-label">Enter the Price of the Deal. 0 for no price.</div>
            <div ng-messages="savingForm.savingsCTRL.price.$error" role="alert">
              <p class="help-block error-text" ng-message="required">Price is required.</p>
            </div>
          </div>

          <!-- Price Box End-->

Batarang clearly shows the model as having the price. If i enter something in the price box and hit update, it saves the new price.

Upvotes: 0

Views: 60

Answers (1)

Daniel
Daniel

Reputation: 6491

You haven't posted your model but there is something special about <input type="number"> - it can only be binded to a number (price = 2), not a string whose value is a number (price = '2').

function Ctrl($scope) {
  $scope.priceStr = '2';
  $scope.priceNum = 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
  <div ng-controller="Ctrl">
    <label>string model </label>
    <input type="number" ng-model="priceStr" /><br/>
    <label>number model </label>
    <input type="number" ng-model="priceNum" />
  </div>
</div>

Upvotes: 1

Related Questions