3

I'm using an input mask directive to force an input field to adjust to a fixed decimal format (dependent on the locale) in AngularJS 1.4.9.

This is my code:

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <form action="http://httpbin.org/post" method="post" name='myForm'>
            <input type="text" name="amount" ui-number-mask="2" ng-model="debit.amount">
            <input type='submit'>
        </form>
    </div>
</div>

Everything works as expected. The model holds the non formatted decimal value and the input field displays the formatted value.

input-mask

The problem arises when I hit submit and the form is submitted in a traditional POST fashion.

The server receives the following:

{ 
    "form": {
        "amount": "1,299.99", 
    },
}

instead of 

{ 
    "form": {
        "amount": "1299.99", 
    },
}

I believe it's because it submits $viewValue instead of $modelValue.

Workarounds I've tried

  1. Use a hidden field and set the VALUE attribute to the model value: 

    <input type='hidden' name="amount_hidden" value="{{debit.amount}}">

    It works, but it's a bit of a hassle having to duplicate fields. See JsFiddle.

  2. Submit using AngularJS' $http.post() to mimic a traditional form post. This also works, but it's even more cumbersome than the previous. See JsFiddle.

Is there an easier way to force the submission of $modelValue?

Inigo Flores
  • 4,461
  • 1
  • 15
  • 36
  • 1
    When you a traditional form submit, angular is not involved so the model values are not looked at. I think ng-submit is the correct way of submitting the forms with angular. Why do you think it is cumbersome? – Narain Mittal Feb 09 '16 at 19:03
  • @NMittal is right. A traditional form submit is taking whatever value is stored in the 'value' attribute on the input. Therefore `$viewValue` is what is reflecting in your request. Another solution would be to have an element positioned over the input displaying the `$modelValue` instead of the `$viewValue`. – Sean Larkin Feb 09 '16 at 19:13
  • While it's still a duplication of fields, you could stop the duplication of data being sent to the server. Remove the name attribute from the visible input field. See http://stackoverflow.com/a/3008071/1248889 – jgawrych Feb 09 '16 at 19:51
  • @NMittal angular is indeed involved. That's the reason the `VALUE` attribute is ignored in `INPUT` fields. I think it's cumbersome because of the number of lines of code you have to write and maintain to be able to replicate a simple post action. – Inigo Flores Feb 09 '16 at 20:30
  • @SeanLarkin If it took the contents of the `VALUE` attribute, then the problem could be easily solved by setting this field. However, this attribute is ignored altogether in `INPUT` fields. – Inigo Flores Feb 09 '16 at 20:31
  • @InigoFlores value attribute is not ignored, it is the value attribute which you see in the text box which is = $viewValue. The HTML submit does not know what is in the $modelValue. And if you want to reduce lines of code with ng-submit, you can simply write a one liner: `$http.post("URL", {'debit.amount':$scope.debit.amount});` to achieve a simple post action – Narain Mittal Feb 09 '16 at 21:08
  • @NMittal See this [AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?](http://stackoverflow.com/questions/10610282/angularjs-value-attribute-on-an-input-text-box-is-ignored-when-there-is-a-ng-m/20522955). Also `$http.post("URL", {'debit.amount':$scope.debit.amount});` will not mimic a traditional form post. – Inigo Flores Feb 09 '16 at 23:17

0 Answers0