dniccum / nova-phone-number

A Laravel Nova field to format and validate phone numbers.

A Laravel Nova field to format using a dynamic input mask and additional phone number validation.

NOTE: This field utilizes Propaganistas / Laravel-Phone package for validation.

Installation

To install this tool, use the installation code below:

composer require dniccum/phone-number

Code

To use the field, add the following code to your Nova resource. As this is a field, all of the default field properties can be applied.

use Dniccum\PhoneNumber\PhoneNumber;

PhoneNumber::make('Phone Number')

Options

To support multiple types and formats of phone numbers, this field has multiple methods for input masking and validation that are available.

Defaults

Method/Options	Default
format	string: '(###) ###-####'
placeholder	string: '[Name of Field]'
useMaskPlaceholder	boolean: false
country	string: 'US'
countries	string[]: ['US']
disableValidation	boolean: false
linkOnIndex	boolean: false
linkOnDetail	boolean: false

format

PhoneNumber::make('Phone Number')
    ->format('###-###-####')

Type: string

Default: (###) ###-####

This is the value that the javascript controlling the input mask will use define it's values; and depending the field's configuration the placeholder text. To indicate numbers, use the hash (#) symbol.

Note: Other types of content can be included within this input like an phone extension:

PhoneNumber::make('Phone Number')
    ->format('###-###-#### ext ####')

However the built-in phone number validation will FAIL as this is technically an invalid phone number. To prevent the validation from failing, turn off the phone number validation like so:

PhoneNumber::make('Phone Number')
    ->format('###-###-####')
    ->disableValidation()

placeholder

PhoneNumber::make('Phone Number')
    ->placeholder('Personal Home Number')

Type: string

Default: [Name of the Field]

If you would like to override the default placeholder supplied by Nova, which is the name of field, user a simple string.

Note: If you are telling the input to override the placeholder by using the input's mask with the useMaskPlaceholder method, this will not work.

useMaskPlaceholder

PhoneNumber::make('Phone Number')
    ->useMaskPlaceholder()

Type: boolean

Default: false

This will tell the field to replace the input's defined placeholder with the input mask from the ->format() method.

country

PhoneNumber::make('Phone Number')
    ->country('CA')

Type: string

Default: US

This tells the field what type of phone number validation to use. To define a type of validation, define a ISO 3166-1 alpha-2 compliant country code.

You can only define one country here. If you would like to define more than one, please see the ->countries() method.

NOTE: This field utilizes Propaganistas / Laravel-Phone package for validation.

countries

PhoneNumber::make('Phone Number')
    ->countries(['US', 'CA'])

Type: string[]

Default: US

If you would like to define more than one country to validate against, define string-based array of ISO 3166-1 alpha-2 compliant country codes.

NOTE: This field utilizes Propaganistas / Laravel-Phone package for validation.

linkOnIndex

PhoneNumber::make('Phone Number')
    ->linkOnIndex()

Type: boolean

Default: false

Render's the phone number as a clickable link on the index view.

linkOnDetail

PhoneNumber::make('Phone Number')
    ->linkOnDetail()

Type: boolean

Default: false

Render's the phone number as a clickable link on the detail view.

Credits

• Doug Niccum
• Braden Keith
• lintaba
• Maxim Kot
• Shawn Heide

License

The MIT License (MIT). Please see License File for more information.

nova-phone-number's Issues

Does not respect nullable

According to issues on the validation dependency, to accept an empty field, nullable needs to be set in the validation rules. I assume Nova is doing this under the hood for any registered fields that have "nullable()" called on them, but this field doesn't seem to be inheriting that functionality. So:

PhoneNumber::make('Phone', 'contact_phone')
    ->nullable(),

Does not allow the form to be submitted with an empty field.

Issues with phone number validation.

I also am having the same issue but I not use disableValidation. This is my config:

PhoneNumber::make('Telefone', 'phone')
->sortable()
->format('(##) #####-####')
->placeholder('(00) 00000-0000')
->linkOnDetail()
->linkOnIndex(),

Originally posted by @mvnobrega in #5 (comment)

Separate country field

The ability to store the country or prefix in a separate column would be great, Spark uses this for storing 2FA numbers, and propaganistas supports it.

Missing vendor/dniccum/phone-number/dist folder

Hi Doug,

This is a nice field, thanks, but just a heads-up...

I installed your package and followed your instructions but the field did not display. The following error was in my laravel.log:

[2018-09-27 11:15:52] local.ERROR: file_get_contents(/Users/jsugar/Documents/Projects/Work/all-seasons/vendor/dniccum/phone-number/src/../dist/js/field.js): failed to open stream: No such file or directory

I navigated to vendor/dniccum/phone-number and saw that the dist folder was indeed missing.

After running yarn followed my yarn run dev the dist folder was generated and everything worked fine.

Option useMaskPlaceholder not works as expected

Good morning,

When I apply useMaskPlaceholder as false, the mask continues to apply, my code:

PhoneNumber::make('Teléfono del SAC', 'sac_phone')
      ->country('ES')
      ->useMaskPlaceholder(false)
      ->linkOnIndex()
      ->linkOnDetail()
      ->sortable()
      ->required(),

The mask showed: [phone]

I have installed:

"dniccum/phone-number": "^2.2", // -> 2.2.2
"laravel/framework": "^10.0", // -> 10.13.0
"laravel/nova": "~4.0", // -> 4.24.4

Thanks

the field show null instead of "----"

Hi,

I use this package and set the field option disableValidation() to remove the field from the mandatory field list.

But now, in the list and details page the value show me "null" instead of "----".

Can you please guide me how to set the value to "-----" instead of null

linkOnIndex not working in Nova 4

The mobile number is not styled to look like a link, but additionally the link doesn't work.

It's rendering an anchor but the styles seem to be preventing it from being clickable over the containing row.

By comparison the email field (https://github.com/inspheric/nova-email-field) is rendering as a link and it works; the markup looks like this:

Error when trying to use the country() validator

Hi! Thanks for this awesome package!

I am having the following error message when using the ->country() validation

This is my code

PhoneNumber::make('Phone')->country('AR'),

At first, I thought this was due my seeds having invalid phone numbers. I re-seed my db with a valid one for Argentina: 011 57788785 but it's still not working. I check if the formats are valid for the package in the following demo

I also tryed with other countries, like 'CA', and still no luck.

If i don't use the ->country() validation, I don't get the error and the field shows just fine
I am using v1.0.1

Thanks in advance!

Validation Error

I'm using the following in my Nova resource:

PhoneNumber::make('Phone')
                ->disableValidation()
                ->linkOnDetail()
                ->hideFromIndex(),

However, when I try to update my resource, I get a validation.phone error even though I am using ->disableValidation().

Only format's input

I noticed that the format does not apply on the index or detail view? Is this correct behavior?

Make formatting available on detail and index views.

Just wondering - would it not be better to not change that format? If a database is configured a certain way with certain lengths this can pose a problem. Currently nova is relatively new and as it becomes more widely adopted I believe it would pose a bigger issue.

I would suggest that the format is not applied on setter but on a getter and input only. Leaving the database table format as is and using the format visually. What are your thoughts on this? That would make your nova field be more aesthetic and maybe have a save-with-format option that will write to database if needed.

Originally posted by @johnpaulmedina in #4 (comment)

[request]: add option removeMaskOnSubmit()

Hi, Doug. Thanks for this package.

Would be great if there was an option 'remove the mask before submitting the form'

Compatibility with Nova 4?

Compatibility with Nova 4?

Icannot install this because the Propaganistas / Laravel-Phone has released a new version 5.0

I'm not sure why I cant make it work with the previus version. it might be due to laravel 10 or something.

When phone field is blank then it should be display the proper message

Hey @dniccum @batFormat ,

I used this for the mobile field, but when I try to submit the form it shows me an error of the field contains an invalid number, but I have not added any kind of number with the field.

It should display the message like, "the mobile field is required" or "the mobile field not blank".

I show your package code there is only one rule "phone", but it does not check first that is required or not.

As per my concern,

you have to apply two rule on the filed:

1. required
2. phone

If I disabled the rule then no rule will be applied (required rule also be removed)

Bad mask to Spanish "ES" phone numbers

Good morning,

If set ES as country this show mask (934) 581-803 and the correct thing would be ([phone].
My code is:

PhoneNumber::make('Teléfono del SAC', 'sac_phone')
    ->country('ES')
    ->linkOnIndex()
    ->sortable()
    ->required(),

I have installed:

"dniccum/phone-number": "^2.2", // -> 2.2.2
"laravel/framework": "^10.0", // -> 10.13.0
"laravel/nova": "~4.0", // -> 4.24.4

Thanks