Giter VIP home page Giter VIP logo

ngx-phone-validators's Introduction

ngx-phone-validators

npm

An implementation of various angular validators for Angular 2+.

List of validators

  1. Phone

Install

npm install ngx-phone-validators --save

No config needed

Add following to project.config.ts

let additionalPackages: ExtendPackages[] = [
  {
    name: "google-libphonenumber",
    path: "node_modules/google-libphonenumber/dist/libphonenumber.js"
  },
  {
    name: "ngx-phone-validators",
    path:
      "node_modules/ngx-phone-validators/bundles/ngx-phone-validators.umd.min.js"
  }
];

this.addPackagesBundles(additionalPackages);

For AOT add

this.ROLLUP_NAMED_EXPORTS = [
  ...this.ROLLUP_NAMED_EXPORTS,
  {
    "node_modules/google-libphonenumber/dist/libphonenumber.js": [
      "PhoneNumberUtil"
    ]
  }
];

Install

npm install ngx-phone-validators --save

How to use [model driven]

needs: ReactiveFormsModule

Phones

import {PhoneValidators} from 'ngx-phone-validators'

...
phone: FormControl = new FormControl('', Validators.compose([
    PhoneValidators.isValidRegionCode,
    PhoneValidators.isPhoneNumber('DE'),
    PhoneValidators.isPossibleNumberWithReason('DE'),
    ]));
regionCode: FormControl = new FormControl('', PhoneValidators.isValidRegionCode);
phoneNumber: FormControl = new FormControl('', PhoneValidators.isPhoneNumber('DE'));
possiblePhoneNumber: FormControl = new FormControl('', PhoneValidators.isPossibleNumberWithReason('DE'));

How to use [template driven]

needs FormsModule and PhoneValidatorsModule

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { PhoneValidatorsModule } from "ngx-phone-validators";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, FormsModule, PhoneValidatorsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Phone

<form>
  <input
    [(ngModel)]="model.phone"
    name="phone"
    #formControl="ngModel"
    phone="DE"
  />
  <span *ngIf="formControl.hasError('noValidRegionCode')"
    >Invalid region code</span
  >
  <span *ngIf="formControl.hasError('noPhoneNumber')"
    >No valid phone number</span
  >
</form>

Country Code

<form>
  <input
    [(ngModel)]="model.phone"
    name="phone"
    #formControl="ngModel"
    countryCode
  />
  <span *ngIf="formControl.hasError('noValidRegionCode')"
    >Invalid region code</span
  >
</form>

Possible phone

<form>
  <input
    [(ngModel)]="model.phone"
    name="phone"
    #formControl="ngModel"
    possiblePhone="DE"
  />
  <span *ngIf="formControl.hasError('noValidRegionCode')"
    >Invalid region code</span
  >
  <span *ngIf="formControl.hasError('noPhoneNumber')"
    >No valid phone number</span
  >
  <span *ngIf="formControl.hasError('phoneNumberTooLong')"
    >Phone number too long</span
  >
  <span *ngIf="formControl.hasError('phoneNumberTooShort')"
    >Phone number too short</span
  >
</form>

Get the complete changelog here: https://github.com/Nightapes/ngx-phone-validators/releases

ngx-phone-validators's People

Contributors

nightapes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

ngx-phone-validators's Issues

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this πŸ’ͺ.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.


Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.


Good luck with your project ✨

Your semantic-release bot πŸ“¦πŸš€

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.