ngspot / ngx-errors Goto Github PK

Hey Dmitry,

Can you update this to support version 2.4.0 of tslib?

Thanks!

Feature request

Current behavior

We are able to setup the module to show errors only for dirty inputs OR form submission. I mean if we use both true than we show errors only on form submission.

Expected behavior

Show error:

1. On form control dirty OR form submitted(both cases).
2. On form control touched.
3. On form control touched OR form submitted(both cases).

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

As a product manager, I want the user to see form errors in both cases:

• user touched(edit) form field
• user submit form

As a product manager, I want the user to see form errors when he tab through a required field without editing it.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I just downloaded 3.2.0, which successfully solves #9.

Although I can't resist the feeling that there is another problem. The html templates don't update with ngxErrors immediately, sometimes I need to make several changes and saves before the ngxErrors html kicks in. Will have to try to reproduce it on Stackblitz before I am sure this is not my setup

The problem I am facing is that the syntax for displaying error details

  <div ngxErrors="password">
    <div ngxError="passwordLength" #myMin="ngxError">
      Password has to be at least {{myMin.err.min}} characters long.
      Only {{myMin.err.actual}} typed
    </div>
  </div>

doesn't seem to update as I am typing.

This is a reactive form:

this.fb.group({
  password: ['', [passwordLengthValidator()]],
});

This is my custom validator:

export const passwordLengthValidator = (min = 16): ValidatorFn =>
  (c: AbstractControl) => {
    console.log('validating', c.value)
    if(c.value.trim() === ''){
      return null
    }

    const actualLen = c.value.length;
    return actualLen >= min
      ? null
      : { passwordLength: { min, actual: actualLen }};
}

Am I doing anything wrong? (changeDetection left at default.)

Expected behavior

Minimal reproduction of the problem with instructions

Will provide stackblitz later if successful.

What is the motivation / use case for changing the behavior?

Environment

Angular version: 13.1.2
ngx-errors: 3.2.0
nx workspace
lazy loaded module
reactive form


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a new feature request to support Angular v14 and v15

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Currently supporting Angular versions till 13

Expected behavior

Need to support Angular 14 and 15

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

The ngxError directive can show simple message as an error.

Expected behavior

The ngxError directive can use different data that comes from validation error.
For example for Validators.minLength we can have such data in error: {requiredLength: 10, actualLength: 8}. And we can show user an error: Min length for this field: 10; Actual length: 8

What is the motivation / use case for changing the behavior?

There might be cases when we want to show rich errors for user with additional data comes from Validator.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

Dependency on angular/material errors when compiling

Expected behavior

No such dependency or making it optional.

Minimal reproduction of the problem with instructions

nx workspace
angular 13.1
ngx-errors 3.1.5

Following errors in the console:

./node_modules/@ngspot/ngx-errors/fesm2015/ngspot-ngx-errors.mjs:3:0-45 - Error: Module not found: Error: Can't resolve '@angular/material/core' in '......../node_modules/@ngspot/ngx-errors/fesm2015'

./node_modules/@ngspot/ngx-errors/fesm2015/ngspot-ngx-errors.mjs:9:0-48 - Error: Module not found: Error: Can't resolve '@angular/material/input' in '........../node_modules/@ngspot/ngx-errors/fesm2015'

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Do I really need to install angular/material if I don't need it otherwise? What is that that needs to be imported from angular/material for displaying error messages, please?