mascara Angularjs

Asked

Viewed 1,762 times

0

I’m using AngularJS and in my form I have some fields that need masks, so far I have managed to do, I used the ui.mask.

var app = angular.module("empresaApp",['angularUtils.directives.dirPagination','ui.mask']);

my input was like this: 

<input type="text" ng-model="empresa.nr_CNPJ" ui-mask="99.999.999/9999-99"  />

However when I will enter the data, in this field for example is 22222222222222 and does not apply the mask, someone already had problem with it or knows how to solve it. I need to save in the database already with the mask?

angularjs mask-plugin

  • Imported library? error in console? company.nr_CNPJ is set in controller?

  • Yes, I imported the library, there was no error in the console and the company field.nr_CNPJ is set yes

  • At what point does this happen? , like it’s time to assign values to nr_CNPJ?

  • i feather I need that when registering in the bank, he inform with the mask, hence I thought that just assigning this mask, the value would be sent to the bank with the mask

  • The solution proposed by me helps?

  • actually no, keeps sending data to the bank without the mask

  • Boy send the whole code your! let me see? I did the example ta showing your way, so there’s something wrong in the code!

  • I decided by forcing shipping by model

Show 3 more comments

2 answers

1

Friend, the mask displays the value only in the text field, it is necessary to format it before saving to the database. The ideal is to record the value without any formatting, and being a CNPJ the best option is the type of numerical data (facilitates search, performance and other things).

If you really need to write a formatted string, you should form it before reaching the BD.

You can do this in the backend (if you use Java for example), you can do this in Javascript before you get to the backend. To do Javascript (Angular), do it through Regex:

$scope.formatCnpj = function(cnpj) {
   return cnpj.replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1.$2.$3/$4-$5");
};

0

In the ui-Mask the data format is only in the element that in this case is a <input>, in the model is the data without formatting, but, there is a way to recover the formatted value:

angular.element('#id_do_elemento').val()

with angular element. comes the value with the mask, look a minimal example:

var app = angular.module('app', ['ui.mask']);

app.controller('ctrl', function($scope) {
  $scope.text = "11111111111111";
  $scope.read = function() 
  {    
    console.log(angular.element('#text').val());    
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.7/mask.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <input id="text" type="text" ng-model="text" ui-mask="99.999.999/9999-99" ui-mask-placeholder-char="_" />
  <button ng-click="read()">Log</button>
</div>

References

Browser other questions tagged angularjs mask-plugin

You are not signed in. Login or sign up in order to post.