Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in Cleave phone form #725

Open
ItaloCobains opened this issue Apr 20, 2024 · 1 comment
Open

Error in Cleave phone form #725

ItaloCobains opened this issue Apr 20, 2024 · 1 comment

Comments

@ItaloCobains
Copy link

i'm trying use Cleave in my rails project with stumulus and i have this error.

how to fix this ?

image

My code:

import { Controller } from "@hotwired/stimulus"
import Cleave from "cleave.js"

// Connects to data-controller="cleave"
export default class extends Controller {
  static values = {
    delimiter: String,
    uppercase: Boolean,
    blocks: String,
    type: String
  }

  connect() {
    this.setOptions()
    this.cleave = new Cleave(this.element, this.options)
    console.log(this.cleave)
  }

  disconnect() {
    if (this.cleave) {
      this.cleave.destroy()
    }
  }

  setOptions() {
    this.options = {}
    if (this.hasDelimiterValue) { this.options["delimiter"] = this.delimiterValue }
    if (this.hasBlocksValue) { this.options["blocks"] = this.blocksValue.split(",").map(Number) }
    if (this.hasUppercaseValue) { this.options["uppercase"] = this.uppercaseValue }
    switch(this.hasTypeValue && this.typeValue) {
      case "credit-card":
        this.options["creditCard"] = true
        break;
      case "date":
        this.options["date"] = true
        this.options["datePattern"] = ["d", "m", "Y"]
        break;
      case "number":
        this.options["numeral"] = true
        this.options["numeralThousandsGroupStyle"] = "thousand"
        break;
      case "phone":
        this.options["phone"] = true
        this.options["phoneRegionCode"] = "BR";
        this.options["prefix"] = "+55"
        this.options["delimiter"] = "-"
        break;
      case "time":
        this.options["time"] = true
        this.options["timePattern"] = ["h", "m", "s"]
        break;
    }
  }
}
@halitak
Copy link

halitak commented Jun 10, 2024

hi, this is what you need. You can also look at the link below.

import 'cleave.js/dist/addons/cleave-phone.br';

https://github.com/nosir/cleave.js/blob/master/doc/phone-lib-addon.md

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants