rsaenen / ngx-custom-validators

Angular custom directives for validation

Description

Angular Custom Validators, forked from ng2-validation. Directives for form validation (template or model driven).

Installation

npm i ngx-custom-validators --save

Validators

Angular built-in validators

• maxlength
• minlength
• pattern
• required

Custom validators

• array length
• base64
• credit card
• date
• date ISO
• digits
• email
• equal
• included in
• not included in
• not equal
• equal to
• not equal to
• greater than
• greater than or equal
• json
• less than
• less than or equal
• max
• max date
• min
• min date
• not equal
• not equal to
• number
• property
• range
• range length
• url
• uuid

Usage

The paramater of each validator (if it has) can be accessible in the template with reason.

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [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>

Template driven

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 { AppComponent } from './app.component';

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

range length - rangeLength

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]">
<p *ngIf="field.errors?.rangeLength">error message</p>

min

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10">
<p *ngIf="field.errors?.min">error message</p>

greater than - gt

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
<p *ngIf="field.errors?.gt">error message</p>

greater than or equal - gte

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gte]="10">
<p *ngIf="field.errors?.gte">error message</p>

max

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20">
<p *ngIf="field.errors?.max">error message</p>

less than - lt

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20">
<p *ngIf="field.errors?.lt">error message</p>

less than or equal - lte

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20">
<p *ngIf="field.errors?.lte">error message</p>

range

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]">
<p *ngIf="field.errors?.range">error message</p>

digits

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits>
<p *ngIf="field.errors?.digits">error message</p>

number

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number>
<p *ngIf="field.errors?.number">error message</p>

url

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url>
<p *ngIf="field.errors?.url">error message</p>

email

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngvemail>
<p *ngIf="field.errors?.email">error message</p>

date

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date>
<p *ngIf="field.errors?.date">error message</p>

min date - minDate

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09">
<p *ngIf="field.errors?.minDate">error message</p>

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [minDate]="myOtherField">
<p *ngIf="field.errors?.minDate">error message</p>

max date - maxDate

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09">
<p *ngIf="field.errors?.maxDate">error message</p>

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [maxDate]="myOtherField">
<p *ngIf="field.errors?.maxDate">error message</p>

date ISO - dateISO

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO>
<p *ngIf="field.errors?.dateISO">error message</p>

credit card - creditCard

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard>
<p *ngIf="field.errors?.creditCard">error message</p>

json

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json>
<p *ngIf="field.errors?.json">error message</p>

base64

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64>
<p *ngIf="field.errors?.base64">error message</p>

uuid

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'">
<p *ngIf="field.errors?.uuid">error message</p>

default: all

support

• 3
• 4
• 5
• all

equal

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'">
<p *ngIf="field.errors?.equal">error message</p>

not equal - notEqual

<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'">
<p *ngIf="field.errors?.notEqual">error message</p>

equal to - equalTo

<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">
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

not equal to - notEqualTo

<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">
<p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

property

public obj = { id: 1 } // OK
public obj = { name: 'baguette' } // KO

<input type="text" ngModel name="obj" #obj="ngModel" property="id">
<!-- For multiple properties check -->
<input type="text" ngModel name="obj" #obj="ngModel" property="id,value,name">
<p *ngIf="obj.errors?.property">property error</p>

array length - ArrayLength

public arr = [{ name: 'baguette' }, { name: 'croisant' }] // OK
public arr = [{ name: 'baguette' }] // KO

<input type="text" ngModel name="arr" #arr="ngModel" arrayLength="2">
<p *ngIf="arr.errors?.arrayLength">arrayLength error</p>

Model driven

import ReactiveFormsModule in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

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

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

import CustomValidators in app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { CustomValidators } from 'ngx-custom-validators';

@Component({
    selector: 'app',
    template: require('./app.html')
})
export class AppComponent {
    form: FormGroup;

    constructor() {
        this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))
        });
    }
}

<input type="text" formControlName="field">
<p *ngIf="demoForm.from.controls.field.errors?.rangeLength">error message</p>

range length - rangeLenght

new FormControl('', CustomValidators.rangeLength([5, 9]))

min

new FormControl('', CustomValidators.min(10))

greater than - gt

new FormControl('', CustomValidators.gt(10))

max

new FormControl('', CustomValidators.max(20))

less than - lt

new FormControl('', CustomValidators.lt(20))

range

new FormControl('', CustomValidators.range([10, 20]))

digits

new FormControl('', CustomValidators.digits)

number

new FormControl('', CustomValidators.number)

url

new FormControl('', CustomValidators.url)

email

new FormControl('', CustomValidators.email)

date

new FormControl('', CustomValidators.date)

min date - minDate

new FormControl('', CustomValidators.minDate('2016-09-09'))

max date - maxDate

new FormControl('', CustomValidators.maxDate('2016-09-09'))

date ISO - dateISO

new FormControl('', CustomValidators.dateISO)

credit card - creditCard

new FormControl('', CustomValidators.creditCard)

json

new FormControl('', CustomValidators.json)

base64

new FormControl('', CustomValidators.base64)

uuid

new FormControl('', CustomValidators.uuid('3'))

equal

new FormControl('', CustomValidators.equal('xxx'))

not equal - notEqual

new FormControl('', CustomValidators.notEqual('xxx'))

equal to - equalTo

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.equalTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

<form [formGroup]="form">
  <input type="password" formControlName="password">
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword">
  <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
</form>

not equal to - notEqualTo

let password = new FormControl('', Validators.required);
let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));

this.form = new FormGroup({
  password: password,
  certainPassword: certainPassword
});

<form [formGroup]="form">
  <input type="password" formControlName="password">
  <p *ngIf="form.controls.password.errors?.required">required error</p>
  <input type="password" formControlName="certainPassword">
  <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p>
</form>

property

public obj = { id: 1 };

this.form = new FormGroup({
  obj: new FormControl('', CustomValidators.property('id'))
  // For multiple properties check
  obj: new FormControl('', CustomValidators.property('id,value,name'))
});

<form [formGroup]="form">
  <input type="text" formControlName="obj">
  <p *ngIf="form.controls.obj.errors?.property">property error</p>
</form>

array length - ArrayLength

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('', CustomValidators.arrayLength(2))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.arrayLength">arrayLength error</p>
</form>

included in array - includedIn

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('bread', CustomValidators.includedIn(arr))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.includedIn">includedIn error</p>
</form>

not included in array - notIncludedIn

public arr = [{ name: 'baguette' }, { name: 'croisant' }]
this.form = new FormGroup({
  arr: new FormControl('baguette', CustomValidators.notIncludedIn(arr))
});

<form [formGroup]="form">
  <input type="text" formControlName="arr">
  <p *ngIf="arr.errors?.notIncludedIn">notIncludedIn error</p>
</form>

not matching a regular expression - notMatching (negate pattern)

public pattern = /a+bc/
this.form = new FormGroup({
  p: new FormControl('aabc', CustomValidators.notIncludedIn(pattern))
});

<form [formGroup]="form">
  <input type="text" formControlName="p">
  <p *ngIf="arr.errors?.notMatching">notMatching error</p>
</form>

For developpers

To run the projet : npm start Don't forget to run npm test and npm lint before each pull request. Thanks !

ngx-custom-validators's Issues

Is not compatible with @angular/[email protected]

├── UNMET PEER DEPENDENCY @ angular/compiler @5.0.2
├── UNMET PEER DEPENDENCY @ angular/core @5.0.2
└── [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN [email protected] requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.

equalControl.updateValueAndValidity is not a function

Ignore this issue, it didn't happen.

Url validator should consider www.test.com as valid

Url validator consider www.test.com as invalid, because not starting with http://, https://, or ftp://.

It should be less restrictive and should consider a url starting with www as valid.

What do you think?

minDate validation with year < 100

When I use something like minDate="1900-01-01", it fails to properly catch a date input with a year between 0 and 99. For example, if you input 0001-01-01. If I understand this correctly, it appears it could be a possible issue with parseDate:

https://github.com/rsaenen/ngx-custom-validators/blob/master/src/app/util/lang.ts#L14

It may need to properly account for the way JS handles years 0-99 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Two_digit_years_map_to_1900_-_1999)

Is this a valid bug?

NGX-CUSTOM-VALIDATOR **NOT WORK** After Upgrade Angular Version

IMPORTANT:
After I have upgrade Angular CLI version from 11 to 12
There are issue below
`
-```
_Namespace '"***/node_modules/ngx-custom-validators/node_modules/@an
gular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

4257 static ɵmod: ɵngcc0.ɵɵNgModuleDeclaration<ɵInternalFormsSharedModule, [typeof ɵNgNoValidate, typeof NgSelectOption, typeof ɵNgSelectMultipleOption, typeof DefaultValueAccessor, t
ypeof NumberValueAccessor, typeof RangeValueAccessor, typeof CheckboxControlValueAccessor, typeof SelectControlValueAccessor, typeof SelectMultipleControlValueAccessor, typeof RadioContro
lValueAccessor, typeof NgControlStatus, typeof NgControlStatusGroup, typeof RequiredValidator, typeof MinLengthValidator, typeof MaxLengthValidator, typeof PatternValidator, typeof Checkb
oxRequiredValidator, typeof EmailValidator], never, [typeof ɵNgNoValidate, typeof NgSelectOption, typeof ɵNgSelectMultipleOption, typeof DefaultValueAccessor, typeof NumberValueAccessor,
typeof RangeValueAccessor, typeof CheckboxControlValueAccessor, typeof SelectControlValueAccessor, typeof SelectMultipleControlValueAccessor, typeof RadioControlValueAccessor, typeof NgCo
ntrolStatus, typeof NgControlStatusGroup, typeof RequiredValidator, typeof MinLengthValidator, typeof MaxLengthValidator, typeof PatternValidator, typeof CheckboxRequiredValidator, typeof
EmailValidator]>;
?_

• _Namespace '"***/node_modules/ngx-custom-validators/node_modules/@an
  gular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

4258     static ɵinj: ɵngcc0.ɵɵInjectorDeclaration<ɵInternalFormsSharedModule>;`


**Ngx-Custom-Validator version 11.0.1**

  - Not working on Angular CLI version 12

**Expected/desired behavior**

  - 

**Environment information**

  - OS: 
  - Angular Version: 
  - Typescript version:
  - npm version: 
  - Node Version: 

**Other information**

Can't bind to 'validator' since it isn't a known property of 'input'.

IMPORTANT:
Hello, I already import
import { CustomFormsModule } from 'ngx-custom-validators'; at app.module.
But I get the issue Can't bind to 'validator' since it isn't a known property of 'input'.

I don't know what else I need to do, I using Angular 5 and start learning a few weeks ago.

Current behavior

• unknown property of 'input'.

Expected/desired behavior

• Accept [validator] as input property

Environment information

• OS: MacOSx 10.14
• Angular Version: 5.2.4
• Typescript version: 2.4.2
• npm version: 6.4.1
• Node Version: 10.6.0

Other information

incompatible with angular 9

IMPORTANT:
For simple form validation i added ngx-custom-validators, but while building i am getting the
below errors

node_modules/ngx-custom-validators/node_modules/@angular/core/core.d.ts:256:18 - error TS2314: Generic type 'ɵɵFactoryDef' requires 2 type argument(s).

Steps to reproduce and a minimal demo
Try to add the below dev dependencies in package.json

"@angular/animations": "~9.0.1",
"@angular/common": "^9.0.1",
"@angular/compiler": "^9.0.1",
"@angular/core": "^9.0.1",
"@angular/fire": "0.0.0",
"@angular/forms": "^9.0.1",
"@angular/http": "^7.2.16",
"@angular/localize": "~9.0.1",
"@angular/platform-browser": "^9.0.1",
"@angular/platform-browser-dynamic": "^9.0.1",
"@angular/router": "^9.0.1",
"@ng-bootstrap/ng-bootstrap": "^6.1.0",
"angularfire2": "5.0.0-rc.4",
"bootstrap": "^4.4.1",
"firebase": "4.8.0",
"ngx-custom-validators": "^9.1.0",
"rxjs": "^6.5.5",
"rxjs-compat": "^6.5.5",
"tslib": "^1.10.0",
"zone.js": "^0.10.2"

Then try to run ng serve

Current behavior
I am getting error in ngx-custom-validators because of some dependencies incompatibility

Expected/desired behavior

• ngx-custom-validators should be compatible with angular 9

Environment information

• OS: windows
• Angular Version: 9.0.2
• Typescript version: 3.7.5
• npm version: 6.13.7
• Node Version: 12.16.0

bug: email validation permits initial space

Current behavior

• form field with email validation permits initial space

Expected/desired behavior

• emails should not have whitespace characters

Why the bootstrap 4 dependency?

It's specified in the dependencies as "bootstrap": "^4.1.3",, what is it used for here?

For some reason it's breaking my angular 9 project that uses bootstrap-sass 3 in legacy code. It's related to sass exports/imports.

Feature Request: digits with decimals

Nice library! I was looking forward to using it, but didn't find the only validator I need at the moment :)

I would like to validate digits with certain number of decimal places.

If decimal places set to 2:
0.12 -> Valid
0.123 -> Invalid

Maybe this can be helpful (my 2 decimal places validator):

export class DecimalValidator {
	static validate(formGroup: FormGroup): any {
		if (formGroup.pristine || !formGroup.value) {
			return undefined;
		}

		const TWO_DECIMAL_REGEXP = /^\d*(?:[.,]\d{1,2})?$/;
		formGroup.markAsTouched();
		if (TWO_DECIMAL_REGEXP.test(formGroup.value)) {
			return undefined;
		}
		return {
			invalidDecimal: true
		};
	}
}

Custom Validators are not working after updating to Angular 11

IMPORTANT:
Please be specific with an example. An issue with

Steps to reproduce and a minimal demo
In a project with Reactive forms, the following lines trigger the error mentioned below
`
import { CustomValidators } from 'ngx-custom-validators';
...
formGroup.addControl('url', new FormControl('', CustomValidators.url);

// Example 2
let myUrl = new FormControl('', CustomValidators.url);

`

• Plunker example Appreciated

Current behavior
I upgraded my project to Angular 11 and while using the custom validators I get the error:
Argument of type 'import("/home/myproject/node_modules/@angular/forms/forms").AbstractControl' is not assignable to parameter of type 'import("/home/myproject/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl'. Types have separate declarations of a private property '_parent'.ts(2345)

Expected/desired behavior
This should work, as I am just using the validators whilst declaring a new FormControl.

Environment information

• OS: Ubuntu 20.04.1 LTS
• Angular Version: 11
• Typescript version: 4.0.5
• npm version: 6.14.8
• Node Version: v14.15.0
  Other information

Does this fork support Angular 9?

See yuyang041060120#135

Overriding Angular's email validator

It seems that newer versions of Angular also have email validator. This library also offers email validator that seems to be more tight and restrictive (which is good). I wonder how it works, though, as the selector seems to be exactly the same. Does Angular run both validators under the same name, or is it overridden somehow (because declared later?)

Error: Please add a @NgModule annotation

Running ng build --prod results in the following error:

ERROR in Unexpected value 'CustomFormsModule in ../node_modules/ngx-custom-validators/ngx-custom-validators.d.ts' imported by the module 'AppModule in ../app.module.ts'. Please add a @NgModule annotation.

Environment information

Angular CLI: 10.2.1
Node: 12.16.1
OS: win32 x64
Angular: 10.2.4
ngx-custom-validators: 10.0.0

Validators broken since ivy

Hello,

I have upgraded Angular and your lib to v9 and now the equalTo validator breaks the app.

Here is the example with and without Ionic: https://stackblitz.com/edit/angular-ivy-ipk5rp

remove [equalTo] and it will work

7.0.0 is not released on npm

Hey, I noticed you release v7 with Angular 7 support but it looks like you forgot to release it on npm.

ngx-custom-validators 9.x embed @angular in distribution

Steps to reproduce and a minimal demo

• I upgraded app to Angular 9 today
• I upgraded ngx-custom-validators to 9.0.1
• I tried to compile one of my libraries that uses CustomValidators.email and found it failing

ERROR: projects/profile-lib/src/lib/classes/booking-user.ts:40:88 - error TS2322: Type 'import("/Users/crash/git/uber/uber-spa/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").ValidatorFn' is not assignable to type 'import("/Users/crash/git/uber/uber-spa/node_modules/@angular/forms/forms").ValidatorFn'.
  Types of parameters 'control' and 'control' are incompatible.
    Type 'import("/Users/crash/git/uber/uber-spa/node_modules/@angular/forms/forms").AbstractControl' is not assignable to type 'import("/Users/crash/git/uber/uber-spa/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl'.
      Types of property 'validator' are incompatible.
        Type 'import("/Users/crash/git/uber/uber-spa/node_modules/@angular/forms/forms").ValidatorFn' is not assignable to type 'import("/Users/crash/git/uber/uber-spa/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").ValidatorFn'.
          Types of parameters 'control' and 'control' are incompatible.
            Type 'import("/Users/crash/git/uber/uber-spa/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl' is not assignable to type 'import("/Users/crash/git/uber/uber-spa/node_modules/@angular/forms/forms").AbstractControl'.
              Types have separate declarations of a private property '_parent'.

Environment information

• OS: Mac
• Angular Version: 9.1.0
• Typescript version: 3.8.3
• npm version: 6.13.7
• Node Version: 13.11.0

Errors should display useful informations.

IMPORTANT:
Validator like "greater than" (equalTo has the same issue) should return back the value which is suppose to be bigger of so we can include the information in the error we have to display.

Steps to reproduce and a minimal demo
Add a validator to the field and check the value of the error.

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
<p *ngIf="field.errors?.gt">error message</p>

Current behavior
The error return a simple boolean.

Expected/desired behavior

{
  greaterThan: 3
}

in this way i can do something like:

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
<p *ngIf="field.errors?.gt">field should be greater than {{ field.error.gt }}</p>

Possible to trigger validation check on blur and not on modal change

Is it possible to change the validation to occur only after input blur event and not on modal change?

Cannot read property 'firstCreatePass' of null - After update to angular 10

I have got this error after an update from Angular 9 to Angular 10.

HTML:

<input class="form-control" type="text" placeholder="digits" ngModel name="digits" #digits="ngModel" digits/>

Error in console:

core.js:4073 ERROR TypeError: Cannot read property 'firstCreatePass' of null
    at providersResolver (core.js:27050)
    at Object.definition.providersResolver (core.js:27382)
    at resolveDirectives (core.js:7918)
    at elementStartFirstCreatePass (core.js:13866)
    at ɵɵelementStart (core.js:13904)
    at ɵɵelement (core.js:13979)
    at FormValidationComponent_Template (template.html:47)
    at executeTemplate (core.js:7364)
    at renderView (core.js:7173)
    at renderComponent (core.js:8431)

• OS: macOS Catalina
• Angular Version: 10.0.1
• Typescript version: 3.9.5
• npm version: 6.13.4
• Node Version: 12.14.0

Following URL is not valid: https://localhost:4200/xxx

Current behavior

When I add the following URL: https://localhost:4200/xxxxx in the text filed, the url is not valid.

Expected/desired behavior

This URL: https://localhost:4200/xxxxx should be valid and accepted by the validator

Environment information

Angular CLI: 8.3.8
Node: 12.13.0
OS: darwin x64
Angular: 8.2.14
NPM: 6.12.0
Typescript: 3.4.5

Other information

Beyond version 8.0.0 is not building with Angular 10+

IMPORTANT:
ngx-custom-validators not working with Angular 10, 11.

Steps to reproduce and a minimal demo

• Add ngx-custom-validators to package.json of a test app created from Angular 11.
• build the project

Current behavior
Angular compiler throws error Type 'import("/builds/xxxx/xxxxx/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").ValidatorFn' is not assignable to type 'import("/builds/xxxx/xxxx/node_modules/@angular/forms/forms").ValidatorFn

Expected/desired behavior
The code should compile without errors

Environment information

• OS: Windows 10 Home
• Angular Version: 11
• Typescript version: 4.0.5
• npm version: 6.14.9
• Node Version: 12.8.0

Other information

v11 Publish Issue

Hi I think you published the wrong contents to NPM. I think you published the whole source instead of the compiled distributable version of it.

Discussion: future of the package

Hello,
I forked ng2-validation since Angular 5 to keep this package updated.

I learned a lot and I has more free time than now. However, my lack of motivation is incompatible to close all issues and to handle this package.

I would be thankfull to people who can fork and support this package.

localhost does not pass a URL validation

Hi @rsaenen

the following URL does not pass the validation by URL

http://localhost:7576/login/callback

Is there a way to fix this?

[Feature Request] notEqualTo should include name of control

Similar to #12

Let's say we define a "password" validation like this:

password: ["", [Validators.required, CustomValidators.notEqualTo(email)]],

The notEqualTo validator's metadata includes the invalid value, so we can show this message:

'password' cannot equal '[email protected]'

But, this is not informative. It should include the name of the target control (email), so that we can do this instead:

'password' cannot equal 'email'

That makes more sense.

So passwordControl.errors should return: { control: {}, otherControlName: 'email' }

Leap year validation

IMPORTANT:
Please be specific with an example. An issue with

Steps to reproduce and a minimal demo

Inject a date validator to a date formcontrol and manually enter leap dates, like:
02/29/2018 Invalid date
02/29/2019 Invalid date
02/29/2020 valid date
02/31/2096 invalid date

Current behavior

there is no leap year validation for date.

Expected/desired behavior

• error should trigger for invalid leap years, testing examples above.

Environment information

• OS: Windows 10
• Angular Version: 8
• Browser: Chrome, IE11

Support phone number validation

Adding support for validating a phone number would be helpful.

Cannot read property 'firstCreatePass' of null

We still have an issue after upgrading ngx-custom-validators from 8.0.0 to 10.0.0 using Angular 10.

HTML

<input
  json
  [(ngModel)]="settings.elements">
</input>

Error in console

zone-evergreen.js:171 Uncaught TypeError: Cannot read property 'firstCreatePass' of null
    at providersResolver (core.js:18748)
    at Object.definition.providersResolver (core.js:19000)
    at resolveDirectives (core.js:7986)
    at elementStartFirstCreatePass (core.js:13939)
    at Module.ɵɵelementStart (core.js:13977)
    at SettingsComponent_ng_container_0_Template (settings.html:70)
    at executeTemplate (core.js:7447)
    at renderView (core.js:7256)
    at TemplateRef.createEmbeddedView (core.js:10162)
    at ViewContainerRef.createEmbeddedView (core.js:10231)

Environment information

• OS: macOS Catalina
• Angular Version: 10.0.6
• Typescript version: 3.9.7
• npm version: 6.14.8
• Node Version: 14.15.0

rangeLength validation fails for integer value

validation fails for when using "CustomValidators.rangeLength([10, 12])".

let value = 98877773733; formGroup.controls[key].setValue(value)

CustomValidator.includedIn does not exist

IMPORTANT:
Please be specific with an example. An issue with

Steps to reproduce and a minimal demo

Install the library and try to use the includedIn and others like notIncludedIn, it is not part of the validators

Current behavior

When doing currency: ['', [Validators.required, CustomValidators.includedIn(array)]]

VSCode says Property 'includedIn' does not exist on type '{ arrayLength: (value: number) => ValidatorFn; base64: ValidatorFn; creditCard: ValidatorFn; date: ValidatorFn; dateISO: ValidatorFn; ... 20 more ...; uuid: (version?: string) => ValidatorFn; }'.ts(2339) and I can not compile my code

Expected/desired behavior

• Should work.

Environment information

• OS: Ubuntu
• Angular Version: 10
• Typescript version: 4.0.2
• npm version: 6.14.8
• Node Version: v12.19.0

Other information

Support Angular 8

When updating Angular to version 8.0.0, the following warnings are generated:

npm WARN [email protected] requires a peer of @angular/core@^7.0.0 but none is installed. You must install peer dependencies yourself.

npm WARN [email protected] requires a peer of @angular/forms@^7.0.0 but none is installed. You must install peer dependencies yourself.

Not working when upgrading to Angular 12

IMPORTANT:
Please be specific with an example. An issue with

Upgrade any application from Angular 11 to Angular 12

Current behavior
Fails to compile with following error:

Error: node_modules/ngx-custom-validators/src/app/url/directive.d.ts:8:25 - error TS2694: Namespace '"C:/Projects/***********/ClientApp/node_modules/ngx-custom-validators/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.

Expected/desired behavior

Compile succefully

Environment information

• OS: Windows 10
• Angular Version: 12
• Typescript version: 4.2.4
• npm version: 6.14.9
• Node Version: v14.16.0

Other information

Incompatibility with Angular 13

IMPORTANT:
Upgrading angular 12 to 13 fails in migration step. Ngx-custom-validators have to be updated to angular@13 as well
$ npx @angular/cli@13 update @angular/core@13 @angular/cli@13
Using package manager: 'npm'
Collecting installed dependencies...
Found 80 dependencies.
Package "ngx-custom-validators" has an incompatible peer dependency to "@angular/common" (requires "~11.0.0" (extended), would install "13.0.1").
Package "ngx-custom-validators" has an incompatible peer dependency to "@angular/core" (requires "~11.0.0" (extended), would install "13.0.1").
Package "ngx-custom-validators" has an incompatible peer dependency to "@angular/forms" (requires "~11.0.0" (extended), would install "13.0.1").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.

Steps to reproduce and a minimal demo
Install angular@13 and [email protected]

Current behavior
Migration fails. Can't start application

Expected/desired behavior
Should work with angular 13

Environment information

• Angular Version: 13
• Typescript version: 4.4.4
• npm version: 6.14.14
• Node Version: 14.17.5

Cannot read property 'parent' of undefined

IMPORTANT:
Unable to install package into my angular project

Steps to reproduce and a minimal demo

Running command npm i ngx-custom-validators --save, or with any older version

Current behavior

• npm ERR! Cannot read property 'parent' of undefined

Expected/desired behavior

• Installs a package

Environment information

• OS: Windows 10
• Angular Version: 10.2.0
• Typescript version: 4.0.2
• npm version: 7.0.3
• Node Version: 15.0.1

Other information

Could you add remote server validation?

Could you add async validation? with Promise or observer as result

CustomValidators.date does not work correctly in Safari.

Validation works correctly in Chrome, Firefox, Opera, IE, Edge.
However, any valid date is indicated as "invalid" in Safari.

"@angular/core": "^6.0.0",
"ngx-custom-validators": "^6.0.0"

Form Group:
initialDate: [this.item.initialDate, [CustomValidators.date]]

[Feature request] Validator to check if a value is included (or not) in an array

It would be nice to have a validator to check if the control value is included or not in an array, something like [includedIn]="array" or [notIncludedIn]="array". The second one will be useful to check the uniqueness of a value.
If interested I can submit a PR.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'error': 'null'

IMPORTANT:
Actually, this is a well known issue in Angular. In the past to call manually the ChangeDetectorRef in ngAfterViewInit helped. But this time it's more tricky. Because the input-field is nested in a *ngIf.

Steps to reproduce and a minimal demo

This is used in an angular material dialog:

`

<dnd-file-chooser
*ngIf="!file"
(change)="select($event.detail)">

filename

{{ 'app.create.error.required' | translate }}

Submit `

Current behavior

• After file is selected, the file-choose disappears and the choosen file is displayed and a text-field for changing its name
• In this moment the error is thrown.

Expected/desired behavior

• The error shouldn't be thrown.

Environment information

• Angular Version: 10.1.6
• Typescript version: 4.0.3
• npm version: 6.13.4
• Node Version: 12

[Angular] Identifier 'email' is not defined. '__type' does not contain such a member

Getting Identifier 'email' is not defined. '__type' does not contain such a member

Project is working fine but don't know why this error shows ?

Environment information

• OS: Windows 10 Pro Version 1709
• Angular Version: 5.2.0
• Typescript version: 2.5.3
• npm version: 5.6.0
• Node Version: 8.11.1

Angular version table

Can we get a table that shows which version of the component goes with which angular version. Thanks

Validate All

Hi,

I need to check whether all the input fields are valid or not on Submit button. So I need a validateAll() or something like this. Is there any way to achieve this?

Please suggest.

Thanks.

Can't bind "equalTo" since itsn't a known property error.

Hi,
I'm trying to inegrate ng4-validators template driven mode.

<div class="form-group">
        <input placeholder="Last Name" class="form-control" type="text" ngModel name="lName" #lName="ngModel" required>
<p class="error" *ngIf="lName.errors?.required">Last Name is required</p>
      </div>

The above code works fine.But when I tried like this

<div class="form-group">
        <input placeholder="Password" class="form-control" type="password" ngModel name="pswd" #pswd="ngModel" required>
        <p class="error" *ngIf="pswd.errors?.required">Password is required</p>
      </div>
      <div class="form-group">
        <input placeholder="Confirm Password" class="form-control" type="password" ngModel name="confPwd" #confPwd="ngModel" required [equalTo]="pswd">
        <p class="error" *ngIf="confPwd.errors?.required">Password is required</p>
        <p class="error" *ngIf="confPwd.errors?.equalTo">Please re-type your password correctly</p>
      </div>

I'm getting the following error message

compiler.es5.js:1694 Uncaught Error: Template parse errors:
Can't bind to 'equalTo' since it isn't a known property of 'input'. ("m Password" class="form-control" type="password" ngModel name="confPwd" #confPwd="ngModel" required [ERROR ->][equalTo]="pswd">
        <p class="error" *ngIf="confPwd.errors?.required">Password is required</p>"): ng:///AppModule/regComponent.html@24:134
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (compiler.es5.js:12937)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (compiler.es5.js:27133)
    at compiler.es5.js:27052
    at Set.forEach (<anonymous>)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (compiler.es5.js:27052)
    at compiler.es5.js:26939
    at Object.then (compiler.es5.js:1683)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26938)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26867)

What am I doing wrong here... ?

regards,
Tony

got error after update to ng 10.0.1

Types of parameters 'control' and 'control' are incompatible.
Type 'import("D:/Workspace/Frontend/playable/node_modules/@angular/forms/forms").AbstractControl' is not assignable to type 'import("D:/Workspace/Frontend/playable/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl'.
Types of property 'validator' are incompatible.
Type 'import("D:/Workspace/Frontend/playable/node_modules/@angular/forms/forms").ValidatorFn' is not assignable to type 'import("D:/Workspace/Frontend/playable/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").ValidatorFn'.
Types of parameters 'control' and 'control' are incompatible.
Type 'import("D:/Workspace/Frontend/playable/node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl' is not assignable to type 'import("D:/Workspace/Frontend/playable/node_modules/@angular/forms/forms").AbstractControl'.
Types have separate declarations of a private property '_parent'.

60         CustomValidators.rangeLength([10, 10]),

min and max are colliding with Mat date component validations

When this module is imported in a project that is used with Mat components, a problem happens with the material date component as it uses min and max validations

    <mat-form-field class="col">
      <input matInput [matDatepicker]="from" name="fromDate" [placeholder]="fromLabel" #fromDate="ngModel" [(ngModel)]="dateFrom"
        (dateChange)="dateFromChanged()" [required]="required" [min]="minDateFrom" [max]="maxDateFrom" [disabled]="readonly"
        (click)="from.open()" autocomplete="off">
      <mat-datepicker-toggle matSuffix [for]="from"></mat-datepicker-toggle>
      <mat-datepicker #from></mat-datepicker>
      <form-validation [name]="fromDate"></form-validation>
    </mat-form-field>

when you use moment as date picker provider in the component

  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
  ],

Environment information

• OS:
• Angular Version: 7.2.1
• Typescript version: 3.2.4
• npm version: 6.6.0
• Node Version: 8.11.2

Bind MinDate and MaxDate validators to a FormControl

Hi

Would it be possible to support binding Min and Max Date validators to another FormControl similar to the
EqualTo validator?

For example:
let maxDateControl = new FormControl('', Validators.required);
let minDateControl = new FormControl('', CustomValidators.maxDate(maxDateControl));

Angular 11 Update

Types of parameters 'control' and 'control' are incompatible.
Type 'import("node_modules/@angular/forms/forms").AbstractControl' is not assignable to type 'import("node_modules/ngx-custom-validators/node_modules/@angular/forms/forms").AbstractControl'.
Types have separate declarations of a private property '_parent'.

• OS:
• Angular Version: 11.0.0
• Typescript version: 4.0.3
• npm version: 6.0.1
• Node Version: 14

Other information

Remove @angular/http dependency

May you please remove @angular/http as it is deprecated in Angular 5 and causing issues with our project here.

ERROR in Symbol ArrayLengthValidator declared in.. Error after install and import the module

IMPORTANT:
ERROR in Symbol ArrayLengthValidator declared in C:/Users/HP/Desktop/shop/shop-fwk-front-core/node_modules/ngx-custom-validators/src/app/array-length/directive.d.ts is not exported from ngx-custom-validators/src/app/custom-forms.module (import into C:/Users/HP/Desktop/shop/shop-fwk-front-core/projects/merca-core-test/src/app/pages/error/error.component.ts)
C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:456
finally { if (e_7) throw e_7.error; }
^

Error: Symbol ArrayLengthValidator declared in C:/Users/HP/Desktop/shop/shop-fwk-front-core/node_modules/ngx-custom-validators/src/app/array-length/directive.d.ts is not exported from ngx-custom-validators/src/app/custom-forms.module (import into C:/Users/HP/Desktop/shop/shop-fwk-front-core/projects/merca-core-test/src/app/pages/error/error.component.ts)
at AbsoluteModuleStrategy.emit (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:156:23)
at ReferenceEmitter.emit (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:71:44)
at ComponentDecoratorHandler.resolve (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\annotations\src\component.js:424:62)
at TraitCompiler.resolve (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\transform\src\compilation.js:398:50)
at NgCompiler.resolveCompilation (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\core\src\compiler.js:352:27)
at NgCompiler.analyzeSync (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\core\src\compiler.js:349:18)
at NgCompiler.ensureAnalyzed (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\core\src\compiler.js:321:22)
at NgCompiler.getDiagnostics (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\core\src\compiler.js:131:40)
at NgtscProgram.getNgSemanticDiagnostics (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@angular\compiler-cli\src\ngtsc\program.js:132:45)
at checkDiagnostics (C:\Users\HP\Desktop\shop\shop-fwk-front-core\node_modules@ngtools\webpack\src\diagnostics.js:46:27)

Steps to reproduce and a minimal demo
Errors show after intstall the package and import in the app.module

• OS:
• Angular Version: "^9.1.11",
• Typescript version: "3.8.3"
• npm version: 6.14.1
• Node Version: v14.8.0

valueChanges subscriptions are not destroyed

Have noticed that in some validators, e.g. https://github.com/rsaenen/ngx-custom-validators/blob/master/src/app/equal-to/validator.ts it subscribes to valueChanges on another form control. Shouldn't this need to be unsubscribed to?