ngneat / error-tailor Goto Github PK

I'm submitting a...

[x] Bug report 

Current behavior

showError() and hideError() simply disappear from libs/control-error.directive.d.ts file when installed

Here's the current content of node_modules/@ngneat/error-tailor/lib/control-error.directive.d.ts

import { ComponentFactoryResolver, ElementRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { ControlContainer, NgControl } from '@angular/forms';
import { ControlErrorAnchorDirective } from './control-error-anchor.directive';
import { ErrorTailorConfig } from './providers';
import { FormActionDirective } from './form-action.directive';
import { ErrorsMap } from './types';
import * as ɵngcc0 from '@angular/core';
export declare class ControlErrorsDirective implements OnInit, OnDestroy {
    private vcr;
    private resolver;
    private host;
    private config;
    private globalErrors;
    private controlErrorAnchorParent;
    private form;
    private ngControl;
    private controlContainer;
    customErrors: ErrorsMap;
    controlErrorsClass: string | undefined;
    controlErrorsTpl: TemplateRef<any> | undefined;
    controlErrorsOnAsync: boolean;
    controlErrorsOnBlur: boolean;
    controlErrorAnchor: ControlErrorAnchorDirective;
    private ref;
    private anchor;
    private submit$;
    private reset$;
    private control;
    private destroy;
    private mergedConfig;
    private customAnchorDestroyFn;
    constructor(vcr: ViewContainerRef, resolver: ComponentFactoryResolver, host: ElementRef, config: ErrorTailorConfig, globalErrors: any, controlErrorAnchorParent: ControlErrorAnchorDirective, form: FormActionDirective, ngControl: NgControl, controlContainer: ControlContainer);
    ngOnInit(): void;
    private setError;
    ngOnDestroy(): void;
    private get isInput();
    private clearRefs;
    private valueChanges;
    private resolveAnchor;
    private buildConfig;
    static ɵfac: ɵngcc0.ɵɵFactoryDef<ControlErrorsDirective, [null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; self: true; }, { optional: true; self: true; }]>;
    static ɵdir: ɵngcc0.ɵɵDirectiveDefWithMeta<ControlErrorsDirective, "[formControlName]:not([controlErrorsIgnore]), [formControl]:not([controlErrorsIgnore]), [formGroup]:not([controlErrorsIgnore]), [formGroupName]:not([controlErrorsIgnore]), [formArrayName]:not([controlErrorsIgnore]), [ngModel]:not([controlErrorsIgnore])", never, { "customErrors": "controlErrors"; "controlErrorsOnAsync": "controlErrorsOnAsync"; "controlErrorsOnBlur": "controlErrorsOnBlur"; "controlErrorsClass": "controlErrorsClass"; "controlErrorsTpl": "controlErrorsTpl"; "controlErrorAnchor": "controlErrorAnchor"; }, {}, never>;
}

Expected behavior

showError() and hideError() method does get expose.

Minimal reproduction of the problem with instructions

Simply create a new Angular project, run ng add @ngneat/error-tailor, and inspect the node_modules/@ngneat/error-tailor/lib/control-error.directive.d.ts file.

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

none

Environment

Angular version: 11.2.5
 
For Tooling issues:
- Node version: v14.16.0

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

No error for this template:

<form [formGroup]="formGroup">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name" [controlErrorAnchor]="nameError" />
    <mat-error><ng-template controlErrorAnchor #nameError="controlErrorAnchor"></ng-template></mat-error>
  </mat-form-field>
</form>

Expected behavior

Error for the template above, as there's no errorTailor hosted in <form>.

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

Currently if we try to use the directive controlErrorAnchor (also in others, but I just tested with controlErrorAnchor) without form, for example, we get no error and it lead us for a difficult debug caused due to a silly mistake. I want to propose a check (probably only in devMode) in this "children" directives in order to avoid losing time with this.

Environment

Angular version: 11.0.0

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

Though customizing the template used to display error messages is supported, it has to be configured for each form and then the controls (controlErrorsTpl) within the form.

Expected behavior

It would be a great feature to support this as a global configuration.

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

Different UI frameworks have different styles of reflecting for error messages. Providing this feature would help eliminate the need for specifying controlErrorsTpl attribute repetitively in multiple forms.

Environment

Others:
I faced this when I tried to use your excellent library with ionic. Ionic form fields are wrapped in an and the error messages are displayed as sibling elements.

<ion-item>
  <ion-label position="stacked">First name</ion-label>
  <ion-input formControlName="firstName"></ion-input>
</ion-item>
<ion-item>
  <ion-label color="danger" stacked>
    {{ error_text }}
  </ion-label>
</ion-item>

Error messages being a sibling item is another issue. This requires that for every form field, we specify the controlErrorAnchor property to place the error message outside of the wrapper ion-item.

I have forked your code and am trying to see if I can come up with a fix. But I'm an Angular newbie and am still coming to grips with its complexities. So if you have some suggestions or other pointers, they will be much welcome. But please don't hold your breath for my work!

Finally, thanks for this excellent library. I was using my own custom components that I used to place after every control to display its errors, if there are any. Providing this mechanism as a form level directive makes things so much easier and is definitely the way to go.

I'm submitting ...

[x] Feature request

Current behavior

It's not possible to use any custom or a third-party component as a part of a form and apply the same functionality as on the standard inputs.

The following Stackblitz demo reproduces this on the base of PrimeNG calendar component and a custom CVA one (also using the PrimeNG calendar inside).

https://stackblitz.com/edit/mlc-cva-error-tailor?file=src%2Fapp%2FappMain.component.ts

Expected behavior

Real cases probably always combine standard inputs with other input components (either third-parties or custom ones) inside a reactive form.

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
[X] Other... Please describe: UI Design Consideration

Current behavior

When error messages are displayed, the attached element remains in the DOM even when the form control is valid. There is visible added white space between form elements when form controls are validated.

Expected behavior

Remove the error message elements which are attached below the form control element or form group.

Minimal reproduction of the problem with instructions

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

The design of the form is altered because of added white space between layered controls and this is undesirable.

Environment

Angular version: 10.1.3


Browser:
- [X] 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
- [X ] Edge version XX
 
For Tooling issues:
- Node version: 12.18.4
- Platform: Windows

Others: N/A

I'm submitting a...

[x] Documentation issue or request

Current behavior

There is no info (no commits) about version 2.2.0 available through the NPM registry.

Expected behavior

Version 2.2.0 should be documented.

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Validation messages are not displayed whenever a custom validator is applied to a form control.
e.g.

isNumeric(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
return !isNaN(control.value) ? null : { numeric: true };
};
}

Expected behavior

Validation messages to be displayed the same way as built-in validators.

Minimal reproduction of the problem with instructions

Simply add a custom validator to a form control and the messages will not be displayed even when the form control has errors.

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

The core functionality of the library is broken with custom validators. It only works will the built-in validators of the Angular Framework.

Environment

Angular version: 13.3.11


Browser:
- [X] Chrome (desktop) version 103.0.5060.134
- [ ] 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: 14.15.4
- Platform:  Windows

Others:
Windows 10

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Gives formControl a validator required, click on the select box and don't select an option, then click away. The select box is highlighted but no error message is displayed.

Added error message to ErrorTailorModule.forRoot({...}) and errorTailor directive on element

Expected behavior

An error message should show up just like eg. text field.

Angular version:  11,  


Browser:
- [x] 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
 

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
[x] Support request
[ ] Other... Please describe:

Problem

I have this component:

function invalidTouched(control: AbstractControl | null | undefined): boolean {
  return !!(control?.invalid && control.touched);
}

export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null): boolean {
    return invalidTouched(control) || invalidTouched(control?.parent);
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-test',
  template: `
    <form errorTailor [formGroup]="formGroup">
      <!-- password field omitted for brevity --> 
      <mat-form-field>
        <mat-label>Password confirmation</mat-label>
        <input
          matInput
          required
          formControlName="passwordConfirmation"
          type="password"
          [controlErrorAnchor]="passwordConfirmationControlErrorAnchor"
          [errorStateMatcher]="customErrorStateMatcher"
        />
        <mat-error>
          <ng-template
            controlErrorAnchor
            #passwordConfirmationControlErrorAnchor="controlErrorAnchor"
          ></ng-template>
          <!-- Here I want to show passwordConfirmation OR formGroup errors, if passwordConfirmation has no errors. -->
        </mat-error>
      </mat-form-field>
    </form>
  `,
})
class TestComponent {
  readonly customErrorStateMatcher = new CustomErrorStateMatcher();
  readonly formGroup = this.formBuilder.group(
    {
      password: ['', [Validators.required]],
      passwordConfirmation: ['', [Validators.required]],
    },
    { validators: this.equalToValidator },
  );

  equalToValidator(group: FormGroup) {
    const password = group.get('password').value;
    const passwordConfirmation = group.get('passwordConfirmation').value;

    return password === passwordConfirmation ? null : { equalTo: true }     
  }
}

... and the problem is that I need to show the equalTo error on the passwordConfirmationControlErrorAnchor template, but only if passwordConfirmation control itself has no error.

Is that possible?

Environment

Angular version: 11.0.0

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

Using the customErrorsClass directive, you can add one css class to the the control-error component. Specifying more than one class like so customErrorClass="classA classB" will result in no class being added to the component.

Expected behavior

The directive should allow for multiple classes to be added. Ideally in said fashion: customErrorClass="classA classB"

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

Frameworks like TailwindCSS and others usually require multiple css classes on one element to achieve a desired look and feel. So if you're in a utility first project, adding a single css class for multiple conceirns can be a bit of an anti-pattern.

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

When using controlErrorsIgnore, it cannot be bound...and using in conjunction with controlErrorsAnchor causes a compile error. When defining tags individually, this works great, however, when using a loop to create options in a radio group, there isn't a way to add logic so that the first option has controlErrorsAnchor and the remaining options have controlErrorsIgnore.

Expected behavior

It would be nice if I could use something like [controlErrorsIgnore]="i !== 0" where i is the index of the item in the loop.

Minimal reproduction of the problem with instructions

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

Currently I have to define 2 inputs with an ngIf checking the index. ngIf="i === 0" for the controlErrorsAnchor directive and ngIf="i !== 0" for the controlErrorsIgnore directive

Environment

Angular version: 15.2.9

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

Others:

[Question]

I am trying so send some information to server which returns some errors for validation, lets say validity of the card.
I now want to use error-tailor to show those once my API call is completed.

I tried to set a behavior in this stackblitz example.
https://stackblitz.com/edit/error-tailor-example-f92cpr?file=src/app/app.component.html

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

Messages don't show up after formGroup.markAllAsTouched(); or formGroup.controls[control].markAsTouched();. Though, angular material highlights the invalid fields.

Expected behavior

Messages should show up after markAsTouched.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/error-tailor-mark-as-touched

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

Highlighting invalid fields after validation requirements have changed, and the user revisits the form to correct previously valid but now invalid sections.

Environment

Angular version: 13.3.5


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

Others:

I'm submitting a...

[ x ] Support request

I can see a short chapter to explain how to connect @ngneat/transloco for basic error message here :
https://github.com/ngneat/error-tailor#i18n-example

But with this code one only gets plain string. not interpolated string like
the length should be more than ${errors.requiredLength} characters

Do you have something in transloco or error-tailor providing an answer to this problem ?
ie there a feature to get interpolated string out of json string (with backquotes) with those extensions ?

Something like what is described in :
https://stackoverflow.com/questions/29182244/convert-a-string-to-a-template-string

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

when the teaxtarea is touched it did not show any error message

Expected behavior

textarea error message will show if its touched

Minimal reproduction of the problem with instructions

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

Environment

Angular version: 16.2.0


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:  16.20.2
- Platform:   Windows

Others:

I'm submitting a doc correction

[x] Documentation issue or request

Expected behavior

Shouldn't it be like the following? (missing return in README.md)

@NgModule({
  declarations: [AppComponent],
  imports: [
    ReactiveFormsModule,
    ErrorTailorModule.forRoot({
      errors: {
        useValue() {
           return {
             required: error => `This field is required`,
             minlength: ({ requiredLength, actualLength }) => `Expect ${requiredLength} but got ${actualLength}`,
             invalidAddress: error => `Address isn't valid`
           }
        }
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

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

We ran into a problem when using this library with Angular 14. In most cases it works fine, but in specific cases when you have a form inside a MatDialog (Material) then it seems that both ngControl and controlContainer have a value when the directive binds to a FormControl. As a result, this.control will resolve to the parent FormGroup instead of the FormControl itself.

When the directive binds to a FormGroup, only the controlContainer has a value and everything is fine.

Tbh, this feels more like bug in Angular to me, but maybe it could be intentional.
This issue seems somewhat related: angular/components#25073.

On the other hand, if we can fix this by simply reversing the order in the assignment of this.control (and stay backwards compatible at the same time), then why not...?

Expected behavior

ControlErrorsDirective always resolved the correct control.

Minimal reproduction of the problem with instructions

Create a minimal form in a MatDialog in an Angular 14 project:

• Set the formGroup on the <form>
• add (at least) 1 <input> inside the form with a formControl which has a required validator
• observe that the error(s) will not be rendered while the input control is dirty and has error state

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

Support for Angular 14.

I'm submitting a ...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  

Current behavior

Building an Angular application migrated already to 15.0.4 with @ngneat/error-tailor 2.2.2 works as expected.
After updating to @ngneat/error-tailor 3.0.3 the build completely collapsed. It seems that ErrorTailorModule is not available at all.

Expected behavior

@NetanelBasal The build should still work with @ngneat/error-tailor 3.0.3 and be compatible with the NgModule convention.

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

The Standalone Component API in Angular v15 is not a breaking change. It's only an optional feature, and NgModule API is still and will be fully supported. The new version of @ngneat/error-tailor shouldn't require changing the actual structure of applications, including using the bootstrapApplication sequence.

Environment

Angular version: 15.0.4


Browser:
- any
 
For Tooling issues:
- Node version: 16.14.0
- Platform:  any

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
[X] Support request
[ ] Other... Please describe:

Current behavior

The errors are displayed on form submit, however, there is no mechanism to remove the displayed error.

Expected behavior

The displayed errors should be removed when the form is reset or another custom event.

Minimal reproduction of the problem with instructions

The basic use case in the documentation with the addition of a reset button to clear the form fields.

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

The user may submit a form and it gets processed. The form is reset but the errors will be displayed immediately because the field are required etc.

Environment

Angular version: 11.2.3


Browser:
- [X] Chrome (desktop) version 88.0.4324.190
- [ ] 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: 14.15.4
- Platform:  Windows

Others:

I'm submitting a...

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

Current behavior

I'm trying to use this lib with angular material components/directives (matInput, mat-select, etc.) but I'm getting an undesired behavior...

... note that in the example above it's rendering the error message inside input.

Expected behavior

I want know if it's possible to use it with angular material and if so, a minimal documentation on how to use would be great.

Minimal reproduction of the problem with instructions

Try to use it with angular material components/directives.

Environment

Angular version: 10.x

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

Currently, ErrMsgFn returns a string, which makes it hard to react on application's language change and perform translation of error messages to newly selected language.

Expected behavior

Would be great if there was a way to either re-initialize FORM_ERRORS or return Observable instead of string in ErrMsgFn so that one could subscribe with async pipe in DefaultControlErrorComponent's template.

Minimal reproduction of the problem with instructions

I'm using @ngx-translate for i18n, this is my current setup:

ErrorTailorModule.forRoot({
    errors: {
                    useFactory(service: TranslateService) {
                        return {
                            [ErrorKeys.REQUIRED]: () => service.instant('error.form.required'),
                            [ErrorKeys.MAX_LENGTH]: ({requiredLength}) => service.instant('error.form.too-long', {maxLength: requiredLength})
                        };
                    },
                    deps: [TranslateService]
                }
            })

What would solve the problem is to use TranslateService.get() instead of TranslateService.instant(), but it returns Observable instead of a string, required by ErrMsgFn.

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

I want to return correct error messages when selected language changes, without the need of refreshing the whole page.

Environment

Angular version: 12.2.4


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

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

Currently we don't show any error message until the 1st blur event on the control. After that, we show the errors always on each change.

Expected behavior

Why not show the error always on value change (i.e. don't wait until the 1st blur event)?

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

We are using error-tailor with material, and we have FormControl's with updateOn: 'change'. This results in our controls becoming red underlined by material when the control knows it's not valid, but no error is shown until blur. After that, if user comes back to the same control, the error is updated on the fly while typing (triggered by control.valueChanges).
I find this behavior a bit confusing and inconsistent, and would prefer to make it consistent by always updating on value change.

Environment

Angular version: 13.1.1

Browser:
- [x] Chrome (desktop) version 99.0.4844.84
- [ ] 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

Hi,
I hope you are doing well.

I am using below version combination.

Angular version: 13.0.0
@ngneat/error-tailor version: 2.2.2

I want to show all the errors related to FormGroup in a toast message, because there are multiple forms which are rendered in tabs.

Is there a way to achieve this?

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
[X] Support request
[ ] Other... Please describe:

Current behavior

When I have multiple errors on one control, I just see the first message.
I see in the code that we select the first key

Expected behavior

I would expect to see all errors or having a way to configure it

Minimal reproduction of the problem with instructions

If it is no clear, I can add a stackblitz

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

Sometimes the user needs to know all validations up front to fill the correct value.

Environment

Angular version: 10.2.0


Browser:
- [X] 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 ...

[x] Feature request

Current behavior

Actually there is only a reactive way how to invoke an error message, either on submit or on blur and both of them depend on a user's action.

Expected behavior

There are cases in some more complex forms where the business logic dictates pre-activated steps controlled just by code and workflow conditions and not only by a user's action. In those cases, there are moments when it's necessary to show error messages (probably even hide them) before that user's action, so a user can see it immediately and without any of his/her activity (like submitting a form or entering some inputs).

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

There many possible ways how to add that API extension and by this feature request I would like to open a discussion about it with the goal to find out the best one.

So the first step, what are you thinking about the idea at all?

I'm submitting a ...

[x] Feature request

Current behavior

Using radio-buttons with more options leads to repeated validation errors (for required validator, for example) as the process is invoked automatically on each element with formControlName directive. Sometimes it's possible to avoid that by choosing some initial default option, but in other cases, it's not possible because of it would affect users' behavior.

<div>
	<b>Voltage</b>
	<ng-template controlErrorAnchor #anchor="controlErrorAnchor"></ng-template>
</div>
<div>
	<p-radioButton
		name="voltage"
		value="PEN"
		formControlName="voltage"
		label="3 PEN 230/400V, 50Hz, AC"
		controlErrorsClass="validation-error"
		[controlErrorAnchor]="anchor">
	</p-radioButton>
</div>
<div>
	<p-radioButton
		name="voltage"
		value="NPE"
		formControlName="voltage"
		label="3 NPE 230/400V, 50Hz, AC"
		controlErrorsClass="validation-error"
		[controlErrorAnchor]="anchor">
	</p-radioButton>
</div>

Expected behavior

The idea is to introduce a new input controlErrorCutout that would allow explicitly skip some of them and let only one because the default behavior of required validator can work correctly on a group of related radio buttons if a user selects one option.

<div>
	<b>Voltage</b>
	<ng-template controlErrorAnchor #anchor="controlErrorAnchor"></ng-template>
</div>
<div>
	<p-radioButton
		name="voltage"
		value="PEN"
		formControlName="voltage"
		label="3 PEN 230/400V, 50Hz, AC"
		controlErrorsClass="validation-error"
		[controlErrorAnchor]="anchor">
	</p-radioButton>
</div>
<div>
	<p-radioButton
		name="voltage"
		value="NPE"
		formControlName="voltage"
		label="3 NPE 230/400V, 50Hz, AC"
		[controlErrorCutout]="true"
		controlErrorsClass="validation-error"
		[controlErrorAnchor]="anchor">
	</p-radioButton>
</div>

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
[ ] Support request
[ ] Other... Please describe:

Current behavior

When you use the required validator with a async validator, the validation is triggert immediately and the error message "the field is required" is shown before you edit the input field.

Expected behavior

The validation should trigger after edit with requird and async validator.

Minimal reproduction of the problem with instructions

Add the required validator to the control-error-directive.spec.ts username: ['', Validators.required, this.usernameValidator.bind(this)]

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

Environment

Angular version: 11


Browser:
- [X] Chrome (desktop) version 89
- [ ] 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: 15.10.0  
- Platform:  Windows 10

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
[ ] Support request
[ ] Other... Please describe:

Unsure if this would be a bug or feature request.

Current behavior

Replacing the formGroup with a new instance breaks the automatic rendering of validation messages.

Expected behavior

Ideally it would pick up on the new form control instance and continue operating normally.

Minimal reproduction of the problem with instructions

Clone of the demo app, with just a reset button added. Reset button simply replaces the initial FormGroup with a new one.

https://stackblitz.com/edit/netanel-control-er-j4ppfw?file=src%2Fapp%2Fapp.component.ts

I believe the issue lies in the NgControl injected into control-errors.directive. When the formgroup is recreated, the injected reference isn't updated to the new one. Short of destroying and re-rendering the entire form with a terribly hacky *ngIf, I haven't found a workaround. I feel like there has to be a better way to force the recognition of an update to an injected object?

I'm submitting an ...

[x] Documentation issue or request

Current behavior

In our case, we tried to use error-tailor package in the situation when it is used inside a lazy-loaded module (loaded programmatically) and error-tailor was imported only on that level and not on the main app module level.

If it is used the following code with useFactory, it works as expected.
If it is used with useValue, it doesn't work. It would be probably helpful for others to explain those two variants explicitly in detail.

@NgModule({
   declarations: [...],
      imports: [
         CommonModule,
         ReactiveFormsModule,
         ErrorTailorModule.forRoot({
            errors: {
               useFactory() {
                  return {
                     required: () => `This field is required`,
                     minLength: ({requiredLength, actualLength}) => `Expect ${requiredLength} but got ${actualLength}`,
                     invalidAddress: () => `Address not valid`
                  };
               }
            }
         }),
      routing,
      ...
]
})
export class LazyLoadedModule {...}

Is there a stackblitz example of how to use error-tailor?

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
[x] Support request
[ ] Other... Please describe:

Current behavior

I have form that looks like this:

form = new FormGroup(
    {
      newPassword: new FormControl('', Validators.required),
      confirmPassword: new FormControl('', Validators.required)
    },
    {
      validators: passwordMatchValidator
    }
  );

and all i see are errros Validators.required but not custom validator for form group

Expected behavior

I want to see all errors. Errors from form controls under inputs and error from form above submit button

Minimal reproduction of the problem with instructions

stackBlitz

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

So basically in my production app i can see the form error don't know why here it's not visible, but the problem is i have no idea how to put the errors from form group above the submit button in the form element