NG17+ Comaptibility and Improvements

.gitignore

@@ -45,3 +45,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# angular
+.angular

CHANGELOG.md

@@ -1,3 +1,8 @@
+### [13.0.0]
+- switched to standalone components => either import CustomFormsModule as before, or import the individual directives you need
+- BREAKING CHANGE: prefixed all directives with "ngv-" to avoid naming collisions
+### [12.0.0]
+- Anbgular 16+ support
 ### [11.0.0]
 - Angular 11 support
 ### [10.0.0]

README.md

@@ -1,24 +1,18 @@
 # Description
 
-Angular Custom Validators, forked from [ng2-validation](https://github.com/yuyang041060120/ng2-validation).
-Directives for form validation (template or model driven).
+Provides directives for form validation (template or model driven) for many validation needs. Supports Angular 16 and higher.
+
+This package follows semantic versioning. See [changelog here](CHANGELOG.md).
+
+Originally forked from [ng2-validation](https://github.com/yuyang041060120/ng2-validation).
 
 # Installation
 
 ```bash
-npm i @rizwan3d/ngx-custom-validators-16 --save
+npm i @davidda/ngx-custom-validators --save
 ```
 
-# Validators
-
-## Angular built-in validators
-
-- maxlength
-- minlength
-- pattern
-- required
-
-## Custom validators
+# Provided validators
 
 - array length
 - base64
@@ -53,9 +47,9 @@ npm i @rizwan3d/ngx-custom-validators-16 --save
 
 # Usage
 
-The paramater of each validator (if it has) can be accessible in the template with `reason`.
+The paramater of each validatiom error (if it has one) is accessible in the template with `reason`.
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-gt]="10">
 <!-- Will display : error message and must be greater than 10 -->
 <p *ngIf="field.errors?.gt">error message and must be greater than {{ field.errors?.reason }}</p>
 ``` 
@@ -68,7 +62,7 @@ import `FormsModule` and `CustomFormsModule` in *app.module.ts*
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
-import { CustomFormsModule } from 'ngx-custom-validators';
+import { CustomFormsModule } from '@davidda/ngx-custom-validators';
 
 import { AppComponent } from './app.component';
 
@@ -81,153 +75,170 @@ export class AppModule {
 }
 ```
 
-### range length - rangeLength
+Alternatively, you may import only the directives you need.
+```typescript
+import { EmailValidator } from "@davidda/ngx-custom-validators";
+@NgModule({
+    imports: [/*...*/, EmailValidator],
+    //...
+})
+```
+
+### length range (of a string value) - rangeLength
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-rangeLength]="[5, 9]">
 <p *ngIf="field.errors?.rangeLength">error message</p>
 ```
 
 ### min
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-min]="10">
 <p *ngIf="field.errors?.min">error message</p>
 ```
 
 ### greater than - gt
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-gt]="10">
 <p *ngIf="field.errors?.gt">error message</p>
 ```
 
 ### greater than or equal - gte
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gte]="10">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-gte]="10">
 <p *ngIf="field.errors?.gte">error message</p>
 ```
 
 ### max
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-max]="20">
 <p *ngIf="field.errors?.max">error message</p>
 ```
 
 ### less than - lt
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-lt]="20">
 <p *ngIf="field.errors?.lt">error message</p>
 ```
 
 ### less than or equal - lte
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-lte]="20">
 <p *ngIf="field.errors?.lte">error message</p>
 ```
 
 ### range
 
 ```html
-<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]">
+<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-range]="[10, 20]">
 <p *ngIf="field.errors?.range">error message</p>
 ```
 
 ### digits
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-digits>
 <p *ngIf="field.errors?.digits">error message</p>
 ```
 
 ### number
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-number>
 <p *ngIf="field.errors?.number">error message</p>
 ```
 
 ### url
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-url>
 <p *ngIf="field.errors?.url">error message</p>
+
+<!-- Optionally, configure the kind of URLs allowed. -->
+ <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-url]="{require_protocol: true}">
 ```
+ [See here](https://github.com/validatorjs/validator.js/blob/2b6b0fa62f5be13202cf376782df154fe42c5c88/src/lib/isURL.js#L8) for a list of options and their defaults.
 
 ### email
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngvemail>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-email>
 <p *ngIf="field.errors?.email">error message</p>
+
+<!-- Optionally, configure the kind of emails allowed. -->
+ <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-email]="{allow_display_name: true}">
 ```
+[See here](https://github.com/validatorjs/validator.js/blob/2b6b0fa62f5be13202cf376782df154fe42c5c88/src/lib/isEmail.js#L8) for a list of options and their defaults.
 
 ### date
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-date>
 <p *ngIf="field.errors?.date">error message</p>
 ```
 
 ### min date - minDate
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-minDate="2016-09-09">
 <p *ngIf="field.errors?.minDate">error message</p>
 ```
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [minDate]="myOtherField">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-minDate]="myOtherField">
 <p *ngIf="field.errors?.minDate">error message</p>
 ```
 
 ### max date - maxDate
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-maxDate="2016-09-09">
 <p *ngIf="field.errors?.maxDate">error message</p>
 ```
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [maxDate]="myOtherField">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [ngv-maxDate]="myOtherField">
 <p *ngIf="field.errors?.maxDate">error message</p>
 ```
 
 ### date ISO - dateISO
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-dateISO>
 <p *ngIf="field.errors?.dateISO">error message</p>
 ```
 
 ### credit card - creditCard
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-creditCard>
 <p *ngIf="field.errors?.creditCard">error message</p>
 ```
 
 ### json
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-json>
 <p *ngIf="field.errors?.json">error message</p>
 ```
 
 ### base64
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64>
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-base64>
 <p *ngIf="field.errors?.base64">error message</p>
 ```
 
 ### uuid
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-uuid="all">
 <p *ngIf="field.errors?.uuid">error message</p>
 ```
 
@@ -243,14 +254,14 @@ export class AppModule {
 ### equal
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-equal="xxx">
 <p *ngIf="field.errors?.equal">error message</p>
 ```
 
 ### not equal - notEqual
 
 ```html
-<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'">
+<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngv-notEqual="xxx">
 <p *ngIf="field.errors?.notEqual">error message</p>
 ```
 
@@ -259,7 +270,7 @@ export class AppModule {
 ```html
 <input type="password" ngModel name="password" #password="ngModel" required>
 <p *ngIf="password.errors?.required">required error</p>
-<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password">
+<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [ngv-equalTo]="password">
 <p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>
 ```
 
@@ -268,7 +279,7 @@ export class AppModule {
 ```html
 <input type="text" ngModel name="password" #password="ngModel" required>
 <p *ngIf="password.errors?.required">required error</p>
-<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [notEqualTo]="password">
+<input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [ngv-notEqualTo]="password">
 <p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>
 ```
 
@@ -280,9 +291,9 @@ public obj = { name: 'baguette' } // KO
 ```
 
 ```html
-<input type="text" ngModel name="obj" #obj="ngModel" property="id">
+<input type="text" ngModel name="obj" #obj="ngModel" ngv-property="id">
 <!-- For multiple properties check -->
-<input type="text" ngModel name="obj" #obj="ngModel" property="id,value,name">
+<input type="text" ngModel name="obj" #obj="ngModel" ngv-property="id,value,name">
 <p *ngIf="obj.errors?.property">property error</p>
 ```
 
@@ -293,7 +304,7 @@ public arr = [{ name: 'baguette' }] // KO
 ```
 
 ```html
-<input type="text" ngModel name="arr" #arr="ngModel" arrayLength="2">
+<input type="text" ngModel name="arr" #arr="ngModel" ngv-arrayLength="2">
 <p *ngIf="arr.errors?.arrayLength">arrayLength error</p>
 ```
 
@@ -322,7 +333,7 @@ import `CustomValidators` in *app.component.ts*
 ```typescript
 import { Component } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
-import { CustomValidators } from 'ngx-custom-validators';
+import { CustomValidators } from '@davidda/ngx-custom-validators';
 
 @Component({
     selector: 'app',
@@ -585,5 +596,5 @@ this.form = new FormGroup({
 ```
 
 # For developpers
-To run the projet : `npm start`
-Don't forget to run `npm test` and `npm lint` before each pull request. Thanks !
+To compile the projet : `npx ng-packagr`
+Don't forget to run `npm test` before each pull request. Thanks!

karma.conf.js

@@ -8,6 +8,7 @@ module.exports = function (config) {
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
@@ -25,7 +26,8 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    //browsers: ['Chrome'],
+    browsers: ['Firefox'],
     singleRun: false,
     restartOnFileChange: true
   });