JSFiddle - React, Tailwind, and code Playground

by Prajeesh_PR

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngMask/3.1.1/ngMask.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="page-wrapper container" ng-app="thisApp">
  <form ng-controller="mainController">
    <p>Type number code:</p>
    <input class="form-control codeinput" type="text" ng-model="code" mask="{{inputMask}}" mask-restrict="reject" mask-limit="true">
    <p ng-if="code.length == inputMask.length">The code you've typed was {{code}}</p>
    <button type="button" ng-click="changeMask()">Change mask to {{currentMaskType == 'cpf' ? 'cnpj' : 'cpf' | uppercase}}</button>
  </form>
</div>

CSS

.codeinput {
  margin-bottom: 8px;
}

JavaScript

var App = angular.module('thisApp', ['ngMask']);
App.controller('mainController', ['$scope', function($scope){

  $scope.dynamicMask = {
  	cpf : '999.999.999',
    cnpj: '99.999.999-9999-99'
  }
  $scope.inputMask = $scope.dynamicMask.cpf;
  $scope.currentMaskType = 'cpf';
  
  $scope.changeMask = function(){
    $scope.currentMaskType = $scope.currentMaskType == 'cpf' ? 'cnpj' : 'cpf';
    $scope.inputMask = $scope.dynamicMask[$scope.currentMaskType];
  };
}]);