Masks in the Angularjs

Asked

Viewed 979 times

1

I would like to know how to use the angular-input-masks. I did all the steps said in the same, but I couldn’t make it work.

I’m using Angularjs, here’s my index page.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CEP Spec</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
	<script src="../node_modules/angular-input-masks/releases/angular-input-masks-dependencies.js"></script>
	<script src="../node_modules/angular-input-masks/releases/angular-input-masks.br.js"></script>
	<script>
		angular.module('app', ['ui.utils.masks']);
	</script>
</head>
<body ng-app="app">
	<form name="form" ng-controller="ctrl">
		<h2>ui-br-cep-mask</h2>
		<input type="text" name="field17" ng-model="initializedCep" ui-br-cep-mask><br>
		<span ng-bind="initializedCep"></span> - {{form.field17.$error}}<br>
		<br>
		<input type="text" name="field18" ng-model="cep" ng-model-options="{allowInvalid:true}" ui-br-cep-mask><br>
		<span ng-bind="cep"></span> - {{form.field18.$error}}<br>
		<br>
	</form>
</body>
</html>

angularjs mask

  • Edith your question and put the code you have tried and failed!

  • Enter the correct dependency: <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.1.0/angular-input-masks-standalone.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.1.0/angular-input-masks.br.min.js"></script>

1 answer

1


To use in your browser, you must execute the command:

npm run build

will create a directory on the project root with the name releases which will contain a file probably with the name angular-input-masks-standalone.min.js. You must remove the lines:

<script src="../node_modules/angular-input-masks/releases/angular-input-masks-dependencies.js"></script>
<script src="../node_modules/angular-input-masks/releases/angular-input-masks.br.js"></script>

And import the generated file:

<script src="angular-input-masks-standalone.min.js"></script>

Or simply import directly from the newsroom NPM:

<script src="https://unpkg.com/[email protected]/releases/angular-input-masks-standalone.min.js"></script>

See working

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/releases/angular-input-masks-standalone.min.js"></script>
<script src="https://unpkg.com/[email protected]/br.js"></script>
<script>
  var app = angular.module('app', ['ui.utils.masks']);
  app.controller('ctrl', function($scope) {
    $scope.percentage = 0.45;
  });
</script>
<div ng-app="app">
  <form name="form" ng-controller="ctrl">
    <h2>ui-br-cep-mask</h2>
    <input type="text" name="field17" ng-model="initializedCep" ui-br-cep-mask><br>
    <span ng-bind="initializedCep"></span> - {{form.field17.$error}}<br>
    <br>
    <input type="text" name="field18" ng-model="cep" ng-model-options="{allowInvalid:true}" ui-br-cep-mask><br>
    <span ng-bind="cep"></span> - {{form.field18.$error}}<br>
    <br>
    <input type="text" name="field" ng-model="percentage" ui-percentage-mask>
  </form>
</div>

  • Perfect, very good, worked perfectly, thank you very much..

Browser other questions tagged angularjs mask

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