Problem to set mask in an input field with Knockoutjs

Question

I’m unable to apply a dynamic mask (CNPJ/CPF) to the input field of an application created in Laravel 4.2, using HTML5 and Knockoutjs.

This is returning the following error message on the Chrome console:

jquery-3.3.1.min.js:2 jQuery.Deferred exception: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function TypeError: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function
    at Object.getMasked (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:12:418)
    at l.m.init (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:15:387)
    at new l (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:15:418)
    at HTMLInputElement.t (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:17:223)
    at Function.each (http://localhost/assets/js/jquery-3.3.1/jquery-3.3.1.min.js:2:2573)
    at w.fn.init.each (http://localhost/assets/js/jquery-3.3.1/jquery-3.3.1.min.js:2:1240)
    at w.fn.init.a.fn.mask (http://localhost/assets/js/jquery-mask-1.14.15/jquery.mask.min.js:17:249)
    at init (http://localhost/assets/js/knockout_custom_bindings.js:13:24)
    at http://localhost/assets/js/knockout-3.5.0/knockout-3.5.0.debug.js:3713:46
    at Object.ignore (http://localhost/assets/js/knockout-3.5.0/knockout-3.5.0.debug.js:1560:33) undefined
w.Deferred.exceptionHook @ jquery-3.3.1.min.js:2
jquery-3.3.1.min.js:2

Uncaught TypeError: Unable to process binding "masked: function(){return maskCnpjCpf }"
Message: e.charAt is not a function
    at Object.getMasked (jquery.mask.min.js:12)
    at l.m.init (jquery.mask.min.js:15)
    at new l (jquery.mask.min.js:15)
    at HTMLInputElement.t (jquery.mask.min.js:17)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)
    at w.fn.init.a.fn.mask (jquery.mask.min.js:17)
    at init (knockout_custom_bindings.js:13)
    at knockout-3.5.0.debug.js:3713
    at Object.ignore (knockout-3.5.0.debug.js:1560)

My HTML code:

@extends('layouts.default')
@section('content')
<main role="main" class="container float-center p-4 col-sm-12" id="main-block">
  <br>
  <div class="jumbotron border border-primary">
    <img class="mb-4" src="{{ asset('assets/img/logo-cnpjcpf-horizontal.png') }}" alt="">
    <h3>CNPJ/CPF</h3>
    <hr class="my-4">
      {{ Form::open(['url' => '/cnpjcpf', 'class' => 'form-signin', 'name' => 'myForm', 'data-bind' => 'submit: enviarCnpjCpf', 'autocomplete' => 'off']) }}
    <div class="form-group">
      <div class="form-row col-sm-6">
        <div class="form-check col-sm-3">
          <input class="form-check-input" type="radio" name="companyIdType" id="companyIdTypeCnpj" value="cnpj" data-bind="checked: companyIdType">
          <label class="form-check-label" for="companyIdTypeCnpj">CNPJ</label>
        </div>
        <div class="form-check col-sm-3">
          <input class="form-check-input" type="radio" name="companyIdType" id="companyIdTypeCpf" value="cpf" data-bind="checked: companyIdType">
          <label class="form-check-label" for="companyIdTypeCpf">CPF</label>
        </div>
      </div>
      <small class="errors-messages" data-bind="validationMessage: companyIdType"></small>
    </div>
    <div class="form-row">
      <div class="form-group col-sm-3">
        <input name="cnpjCpf" type="text" id="cnpjCpf" class="form-control" placeholder="CNPJ ou CPF" autofocus data-bind="value: cnpjCpf, valueUpdate:'afterkeydown', mask: cnpjCpf, masked: maskCnpjCpf">
        <small class="errors-messages" data-bind="validationMessage: cnpjCpf"></small>
      </div>
    </div>
    <br>
      {{ Form::close() }}
    <hr class="my-4">
    <a class="btn btn-primary btn-lg" role="button">Gravar e Avançar</a>
  </div>
</main>
@stop
@section('content-scripts')
<script type='text/javascript' src="{{ asset('assets/js/cadcpf/cadastro-cpf.js') }}"></script>
@stop

My Javascript:

$(document).ready(function(){

  function ConsumerVM() {
    var self = this;

    self.companyIdType = ko.observable('cnpj');
    self.cnpjCpf = ko.observable();

    self.maskCnpjCpf = ko.computed(function() {
      if(self.companyIdType() == 'cpf')
        return '999.999.999-99';
      else
        return '99.999.999/9999-99';
    });
  };


  ko.validation.registerExtenders();

  ko.validation.init({
    insertMessages: false
  }, true);
  ko.validation.locale('pt-BR');
  var consumerVM = new ConsumerVM;

  ko.applyBindings(consumerVM, document.getElementById('main-block'));
});

Answer 1

I found the solution to the problem using jQuery together with Knockoutjs, below the lines changed in the source code.

HTML:

<div class="form-group col-sm-3">
  <input name="cnpjCpf" type="text" id="cnpjCpf" class="form-control" data-bind="value: cnpjCpf, valueUpdate:'afterkeydown'">
  <small class="errors-messages" data-bind="validationMessage: cnpjCpf"></small>
</div>

Javascript:

self.maskCnpjCpf = ko.computed(function() {
  if(self.companyIdType() == 'cpf')
  {
    self.cnpjCpf('');
    $('#cnpjCpf').mask("999.999.999-99");
  } else {
    self.cnpjCpf('');
    $('#cnpjCpf').mask("99.999.999/9999-99");
  }
});

I use the following libraries:

• jQuery 3.3.1;
• jQuery Mask Plugin 1.14.15 - Igor Escobar;
• Knockoutjs 3.5.0.