Want to Mask the phone number input to DB

db_schema

ActiveRecord::Schema[7.0].define(version: 2022_10_08_122055) do
  create_table "employees", force: :cascade do |t|
    t.string "f_name"
    t.string "l_name"
    t.string "email"
    t.string "phone"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

input form field

  <div class="my-5" data-controller="phoneinput">
    <%= form.label :Phone %>
    <%= form.text_field :phone, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full", data: { 'phoneinput-target': 'input'}, :maxlength=>"12", placeholder: "555-111-5555" %>
  </div>

phoneinput_controller.js.txt

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "input" ]
  connect() {
    const input = this.inputTarget;
    // console.log("hellow");
  input.addEventListener("keydown", (e) => {
  if (e.key === "Backspace" || e.key === "Delete") return
  if (e.target.value.length === 3) {
    input.value = input.value + "-"
  }
  if (e.target.value.length === 7) {
    input.value = input.value + "-"
  }
  if(e.target.value.length === 14) {
      input.value = input.value + "-";
  }
}

)
  }
}