Describe the bug

when adding a mask to a mac address validator, returns invalid mac address, even though without the mask its valid. RxwebValidators.mask({ mask: ':::::'})

Expected Behavior

validation to be correct

To Reproduce

RxwebValidators.mac({message:'Invalid MAC address'}), RxwebValidators.mask({ mask: ':::::' }), RxwebValidators.maxLength({ value: 17, message: 'Maximum 17 characters are allowed.', }),

Url (stackblitz or plunker or other)

Package Version

"@rxweb/reactive-form-validators": "^2.0.0"

Description

Now that Angular 13 is released and view engine is deprecated, does this team have any plans on updating reactive-form-validators to be built in at least partial ivy mode, in order to not need to run ngcc for this library? Currently ngcc is the only thing in the way of my team being able to update to yarn 2 with PnP.

Describe the solution you'd like

reactive-form-validators library built with "compilationMode": "partial" and "enableIvy": true

Describe the bug

When selecting the file/files having the validations maxFiles I found an error in my console stated "Cannot read property 'length' of undefined" at reactive-form-validators.es5.js:4090

Expected Behavior

It should allow files as well with RxFormGroup and return proper error message

To Reproduce

Use form builder of RxFormBuilder Create formGroup with file control and add validation RxwebValidators.file with maxFiles: 5

Package Version

@rxweb/reactive-form-validators@^1.9.2

Browser

Google Chrome: Version 76.0.3809.100 (Official Build) (64-bit)

Additional Info

Replication: https://stackblitz.com/edit/angular-8vlt2f?file=src/app/file-add.component.ts Try to upload file and open Console for the error.

Describe the bug

Using a NumericValidator on two controls is an issue if one allows decimals and one forbids them, since the NumericValidator will set the error numeric to false if the value is invalid.

Assuming we create a FormGroup with a height and a age control:

    height: [
      '',
      RxwebValidators.numeric({
        acceptValue: NumericValueType.PositiveNumber,
        allowDecimal: true
      })
    ],
    age: [
      '',
      RxwebValidators.numeric({
        acceptValue: NumericValueType.PositiveNumber,
        allowDecimal: false
      })
    ]

And we translate the numeric error message as Must be a valid number this would make sense if the user enters any non-numeric values to the input.
But as soon as the user enters a decimal value to the age the control will get a translated error message Must be a valid number displayed.
Translating the error message to Can't be a decimal doesn't make sense since as soon as the user enters non-numeric values any of those controls it wouldn't match the input.

Expected Behavior

Differentiate the numeric error to a decimal and non decimal error. If allowDecimal is true, change the key to numericDecimal, else leave it as numeric or rename it to numericInteger.

Other option would be to allow a custom message per Validation. There is a message parameter but it doesn't seem to have any impact on the error message.

    height: [
      '',
      RxwebValidators.numeric({
        acceptValue: NumericValueType.PositiveNumber,
        allowDecimal: true,
        message: 'mustBeADecimal' 
      })
    ],
    age: [
      '',
      RxwebValidators.numeric({
        acceptValue: NumericValueType.PositiveNumber,
        allowDecimal: false,
        message: 'mustBeAnInteger'
      })
    ]

Package Version

@rxweb/[email protected]

Browser

Firefox 75.0

Describe the bug

@boskee has highlighted the scenario in the issue of #111. conditional expression should work if the user puts without conditional statements.

RxwebValidators.required({
                    conditionalExpression: (x) => {
                         return x.toggle;
                    }})

Hi. I have Angular CLI 11.0.6 project when I add @rxweb/reactive-form-validators v2.1.2 to the project, and import it in my project the build fails with:

Error: ./node_modules/@rxweb/reactive-form-validators/fesm2015/rxweb-reactive-form-validators.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@rxweb/reactive-form-validators/fesm2015/rxweb-reactive-form-validators.js: Column must be greater than or equal to 0, got -15
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:543:13)
    at BasicSourceMapConsumer.SourceMapConsumer_allGeneratedPositionsFor [as allGeneratedPositionsFor] (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:201:22)
    at /Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transformation/file/merge-map.js:186:27
    at Array.forEach (<anonymous>)
    at BasicSourceMapConsumer.SourceMapConsumer_eachMapping [as eachMapping] (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/node_modules/source-map/lib/source-map-consumer.js:155:14)
    at buildMappingData (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transformation/file/merge-map.js:147:12)
    at mergeSourceMap (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transformation/file/merge-map.js:21:17)
    at generateCode (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transformation/file/generate.js:74:39)
    at run (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transformation/index.js:55:33)
    at run.next (<anonymous>)
    at Function.transform (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/@babel/core/lib/transform.js:27:41)
    at transform.next (<anonymous>)
    at step (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/gensync/index.js:261:32)
    at /Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Volumes/osx-storage/projects/tux-in/mycocktailworld/mycocktailworld-client/node_modules/gensync/index.js:223:11)

this is my package.json:

{
  "name": "mycocktailworld-client",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "start": "ng serve  --configuration=en",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run mycocktailworld-client:serve-ssr",
    "serve:ssr": "node dist/mycocktailworld-client/server/main.js",
    "build:ssr": "ng build --prod && ng run mycocktailworld-client:server:production",
    "prerender": "ng run mycocktailworld-client:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular-material-extensions/password-strength": "^8.1.0",
    "@angular-material-extensions/select-country": "^4.0.1",
    "@angular/animations": "~11.0.8",
    "@angular/cdk": "^11.0.3",
    "@angular/common": "~11.0.8",
    "@angular/compiler": "~11.0.8",
    "@angular/core": "~11.0.8",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.0.8",
    "@angular/material": "^11.0.3",
    "@angular/platform-browser": "~11.0.8",
    "@angular/platform-browser-dynamic": "~11.0.8",
    "@angular/platform-server": "~11.0.8",
    "@angular/router": "~11.0.8",
    "@apollo/client": "^3.0.0",
    "@ngneat/until-destroy": "^8.0.3",
    "@nguniversal/express-engine": "^11.0.1",
    "@rxweb/reactive-form-validators": "^2.1.2",
    "@sweetalert2/ngx-sweetalert2": "^9.0.0",
    "@swimlane/ngx-charts": "^16.0.0",
    "@tinymce/tinymce-angular": "^4.2.0",
    "angulartics2": "^10.0.0",
    "apollo-angular": "^2.2.0",
    "apollo-link-context": "^1.0.20",
    "apollo-link-error": "^1.1.13",
    "compression": "^1.7.4",
    "cookieconsent": "^3.1.1",
    "domino": "^2.1.6",
    "express": "^4.15.2",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.11.0",
    "moment": "^2.29.1",
    "ng-recaptcha": "^7.0.1",
    "ngx-avatar": "^4.0.0",
    "ngx-cookieconsent": "^2.2.3",
    "ngx-mask": "^11.1.4",
    "ngx-timeago": "^2.0.0",
    "rxjs": "~6.6.0",
    "spdy": "^4.0.2",
    "svg-country-flags": "^1.2.9",
    "sweetalert2": "^10.13.0",
    "tinymce": "^5.6.2",
    "tslib": "^2.0.0",
    "zen-observable": "^0.8.15",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.6",
    "@angular-eslint/builder": "0.8.0-beta.3",
    "@angular-eslint/eslint-plugin": "0.8.0-beta.3",
    "@angular-eslint/eslint-plugin-template": "0.8.0-beta.3",
    "@angular-eslint/schematics": "^0.8.0-beta.3",
    "@angular-eslint/template-parser": "0.8.0-beta.3",
    "@angular/cli": "~11.0.6",
    "@angular/compiler-cli": "~11.0.8",
    "@angular/localize": "^11.0.8",
    "@nguniversal/builders": "^11.0.1",
    "@types/compression": "^1.7.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "@types/spdy": "^3.4.4",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "^6.0.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "source-map-support": "^0.5.19",
    "ts-node": "~8.3.0",
    "typescript": "~4.0.2"
  }
}

Description

The user can able to return the validation config conditionally as needed. As discussed with @manudss on gitter. It should work by providing a new property of 'dynamicConfig' which returns the validation config. This will help when some of the calculation is required based upon the cross field value or current control value.

Describe the solution you'd like

The expected solution should be like as below :

export class User {
    @minNumber({
        dynamicConfig: (x, y) => {
            if (x.age > 18)
                return { value: 2500 };
            else
                return { value: 3500 };
        }
    })
    amount: any[];

    @prop()
    age: string;
}

As per the above code in the minNumber validation user can able to return the properties which are available in the NumberConfig interface excepts conditionalExpression.

Describe the bug

When using IFormGroup and binding to [formGroup] template validation shows following error Type IFormGroup is not assignable to type FormGroup

Expected Behavior

No error at all (works in rutnime obviously)

To Reproduce

component: selectorForm: IFormGroup<YourType>;

template <div [formGroup]="selectorForm" >

Package Version

@rxweb/[email protected]

Describe the bug

I've created a new Angular 10 project with --strict parameter set.

I get this error :

Compiling TypeScript sources through ngc
ERROR: node_modules/@rxweb/types/reactive-form/i-form-group.d.ts:3:18 - error TS2430: Interface 'IFormGroup<T>' incorrectly extends interface 'IAbstractControl<T, T>'.
  Types of property 'patchValue' are incompatible.
    Type '(value: Partial<T>, options?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined) => void' is not assignable to type '(value: T | null, options?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; emitModelToViewChange?: boolean | undefined; emitViewToModelChange?: boolean | undefined; } | undefined) => void'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'T | null' is not assignable to type 'Partial<T>'.
          Type 'null' is not assignable to type 'Partial<T>'.

3 export interface IFormGroup<T> extends IAbstractControl<T, T> {
                   ~~~~~~~~~~

An unhandled exception occurred: node_modules/@rxweb/types/reactive-form/i-form-group.d.ts:3:18 - error TS2430: Interface 'IFormGroup<T>' incorrectly extends interface 'IAbstractControl<T, T>'.
  Types of property 'patchValue' are incompatible.
    Type '(value: Partial<T>, options?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; } | undefined) => void' is not assignable to type '(value: T | null, options?: { onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; emitModelToViewChange?: boolean | undefined; emitViewToModelChange?: boolean | undefined; } | undefined) => void'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'T | null' is not assignable to type 'Partial<T>'.
          Type 'null' is not assignable to type 'Partial<T>'.

3 export interface IFormGroup<T> extends IAbstractControl<T, T> {
                   ~~~~~~~~~~

Expected Behavior

To Reproduce

Open a fresh Stackblitz Angular 10 project and add "@rxweb/types" as a dependency => compilation fails with :

Error in ~/src/main.ts
ngcc failed to run on @rxweb/[email protected].

Url (stackblitz or plunker or other)

Package Version

@rxweb/@

"@rxweb/types": "^1.0.3"

Angular CLI: 10.0.0 Node: 12.18.1 OS: linux x64

Angular: 10.0.1 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1000.0 @angular-devkit/build-angular 0.1000.0 @angular-devkit/build-ng-packagr 0.1000.0 @angular-devkit/build-optimizer 0.1000.0 @angular-devkit/build-webpack 0.1000.0 @angular-devkit/core 10.0.0 @angular-devkit/schematics 10.0.0 @angular/cdk 10.0.0 @angular/cli 10.0.0 @ngtools/webpack 10.0.0 @schematics/angular 10.0.0 @schematics/update 0.1000.0 ng-packagr 10.0.0 rxjs 6.5.5 typescript 3.9.5 webpack 4.43.0

inside OnRequest() unable to use other service like localstorage service or other service. if we use undefined get

we are unable to set dynamic filter

Package Version

@rxweb/@xhrFilter

Describe the problem statement?

I'm trying to implement conditional required validator using RxwebValidators package. The problem occurs when FormGroup is nested and those nested FormGroups are passed as @Inputs into child components. Conditional validation works but only after I make a FormControl dirty, meaning i text something in input and then remove it. Only then, desired FormControl becomes required and invalid which is not the behaviour I'm expecting. It should become required immediately after user inputs "John" in the firstName control. Am I missing something I should do in addition or doing something wrong? Or is it just how it works?

The expected solution you would like

FormControl should become required immediately after conditional expression is met

Url

https://stackblitz.com/edit/rxweb-conditional-required-validator-angular-reactive-fo-xjvfx6

Package version

@rxweb/reactive-form-validators: 2.0.0

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the problem statement?

Website not loading after installing rxweb/translate, the loading indicator does not stop and the app is never loaded

Package version

@rxweb/translate

Bumps json5 to 2.2.3 and updates ancestor dependency @angular-devkit/build-angular. These dependencies need to be updated together.

Updates json5 from 2.2.1 to 2.2.3

Updates @angular-devkit/build-angular from 12.0.5 to 15.0.4

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hello,

I am trying to implement greaterThan comparing two custom values and what i have noticed that validator is called twice: first time with latest value, second time with old value (and since old value is latest it leads to wrong validation)

my code:

static greaterThan = (fieldName: string, message = 'validators.greaterThenMsg') =>
        RxwebValidators.greaterThan({
            message,
            fieldName,
            conditionalExpression: (x: any, y: any) => {
                console.log(x);
                console.log(y);

                return false;
            },
        });

form

form: FormGroup = this.fb.group({
        timeFrom: ['', [Validator.required()]],
        timeTo: [
            '',
            [
                Validator.required(),
                Validator.customGreaterThan('timeFrom'),
            ],
        ],
    });

values received:

as you can see first call to validator (on value change) is with correct value and the second with previous one.

I have implemented custom Angular style validator and everything is going fine (so this is not an issue with change detection runing multiple times o not an issue with value bying set to old one somehow)

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Describe the bug

When using RxFormBuilder with entities decorated with async() the following warning is issued at runtime multiple times: It looks like you're constructing using a FormControl with both an options argument and an async validators argument. Mixing these arguments will cause your async validators to be dropped. You should either put all your validators in the options object, or in separate validators arguments. For example:

// Using validators arguments fc = new FormControl(42, Validators.required, myAsyncValidator);

// Using AbstractControlOptions fc = new FormControl(42, {validators: Validators.required, asyncValidators: myAV});

// Do NOT mix them: async validators will be dropped! fc = new FormControl(42, {validators: Validators.required}, /* Oops! */ myAsyncValidator);

Expected Behavior

No warnings shown at runtime

To Reproduce

Create a FormGroup using an entity with synchronous and async validators.

Url (stackblitz or plunker or other)

Package Version

@rxweb/[email protected]