import * as i0 from '@angular/core'; import { TemplateRef, AfterContentInit, DoCheck, Signal } from '@angular/core'; import { AbstractControl, NgForm, FormGroupDirective } from '@angular/forms'; import { Field, ValidationError, FieldState } from '@angular/forms/signals'; /** * The context of the ValidationErrorDirective */ interface ValidationErrorContext { /** * The label */ $implicit: string | null; /** * The error */ error: any; } /** * Directive allowing to define the template for an error of a given type (using the `valError` input), using an ng-template. * It's used inside the body of the validation errors component, or inside the body of the default validation errors directive. * See the documentation of these two for example usages. */ declare class ValidationErrorDirective { readonly templateRef: TemplateRef; /** * The type of the error that the content of the template must display. */ readonly type: i0.InputSignal; static ngTemplateContextGuard(_directive: ValidationErrorDirective, _context: unknown): _context is ValidationErrorContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * The context of the ValidationFallbackDirective */ interface ValidationFallbackContext { /** * The label */ $implicit: string | null; /** * The error */ error: any; /** * The type of the error */ type: string; } /** * Directive allowing to define a fallback template for an error of a type that is not handled by any validation error directive. * It's used inside the body of the validation errors component, or inside the body of the default validation errors directive. * See the documentation of these two for example usages. * * This is useful to handle forgotten errors instead of displaying no error at all, or to handle all or several error types in the same way, * for example by relying on the error key to choose an internationalized message. */ declare class ValidationFallbackDirective { readonly templateRef: TemplateRef; static ngTemplateContextGuard(_directive: ValidationFallbackDirective, _context: unknown): _context is ValidationFallbackContext; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Directive allowing to register default templates for validation error messages. It's supposed to be used once, * typically in the root component. By using templates to do that, error messages can * - easily be i18ned * - easily use pipes * - easily use HTML * - easily be ordered * * Example usage: * ``` * * This field is mandatory * This field must be at most {{ error.max | number }} * * ``` * * Example usage where a label is used to make the messages less generic: * ``` * * {{ label }} is mandatory * {{ label }} must be at most {{ error.max | number }} * * ``` * * A fallback template can also be provided. This fallback template is used for all the errors that exist on the form control * but are not handled by any of the specific error templates: * ``` * * {{ label }} is mandatory * {{ label }} must be at most {{ error.max | number }} * {{ label }} has an unhandled error of type {{ type }}: {{ error | json }} * * ``` * Using the fallback can also be used to handle all the errors the same way, for example by using the error type as an i18n key * to display the appropriate error message. * * This directive stores the default template references in a service, that is then injected in the validation errors components * to be reused. */ declare class DefaultValidationErrorsDirective implements AfterContentInit { private defaultValidationErrors; /** * The list of validation error directives (i.e. ) * contained inside the directive element. */ readonly errorDirectives: i0.Signal; /** * The validation fallback directive (i.e. ) contained inside the directive element. */ readonly fallbackDirective: i0.Signal; ngAfterContentInit(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } interface FallbackError { type: string; value: any; } interface ErrorsToDisplay$1 { errors: Array; fallback: ValidationFallbackDirective | undefined; fallbackErrors: Array; } type ViewModel$1 = { shouldDisplayErrors: false; } | { shouldDisplayErrors: true; errorsToDisplay: ErrorsToDisplay$1; control: AbstractControl; }; /** * Component allowing to display validation error messages associated to a given form control, form group or form array. * The control is provided using the `control` input of the component. If it's used inside an enclosing form group or * form array, it can instead be provided using the `controlName` input of the component. * * Example usage where the control itself is being passed as input: * ``` * * The birth date is mandatory * The max value for the birth date is {{ error.max | number }} * * ``` * * Example usage where the control name is being passed as input: * ``` * * The birth date is mandatory * The max value for the birth date is {{ error.max | number }} * * ``` * * This component, if the control is invalid, displays its validation errors using the provided templates. * The templates, as shown in the above example, have access to the validation error itself. * * The label of the control can also be provided as input, and then used in the templates: * ``` * * {{ label }} is mandatory * The max value for {{ label }} is {{ error.max | number }} * * ``` * * The component‘s behavior is configured globally by the Config service (see its documentation for more details). It can * - display the first error, or all the errors * - add CSS classes to its host `` element * - add CSS classes to each error message element being displayed * - choose when to display the errors (dirty, touched, touched and submitted, etc.) * * Global, default templates can be defined (and used by this component) using the default validation errors directive * (see its documentation for details). So, if the default error messages are defined and sufficient for a given control, all you * need is * * ``` * * ``` * * or, if the default templates expect a label: * * ``` * * ``` * * If, however, you want to override one or several error messages by custom ones, you can do so by simply defining them inside the * component: * * ``` * * You're too young, sorry * * ``` * * A fallback template can also be provided. This fallback template is used for all the errors that exist on the form control * but are not handled by any of the specific error templates: * ``` * * You're too young, sorry * {{ label }} has an unhandled error of type {{ type }}: {{ error | json }} * * ``` * Note that, the fallback template can also be defined in the default validation errors directive (see its documentation for details). * If a fallback template is defined inside `val-errors`, it overrides the default fallback. * * If an error is present on the control, but doesn't have any template, default template or fallback template defined for its type, * then it's not displayed. If the control is valid, or if none of the errors of the component has a matching template or default template, * then this component itself is hidden. */ declare class ValidationErrorsComponent implements DoCheck { /** * The FormControl, FormGroup or FormArray containing the validation errors. * If set, the controlName input is ignored */ readonly control: i0.InputSignal | null>; /** * The name (or the index, in case it's contained in a FormArray) of the FormControl, FormGroup or FormArray containing the validation * errors. * Ignored if the control input is set, and only usable if the control to validate is part of a control container */ readonly controlName: i0.InputSignal; /** * The label of the field, exposed to templates so they can use it in the error message. */ readonly label: i0.InputSignal; /** * The list of validation error directives (i.e. ) contained inside the component element. */ readonly errorDirectives: Signal; /** * The validation fallback directive (i.e. ) contained inside the component element. */ readonly fallbackDirective: Signal; /** * The Config service instance, defining the behavior of this component */ private readonly config; readonly errorsClasses: string; readonly errorClasses: string; private readonly validationState; /** * The DefaultValidationErrors service instance, holding the default error templates, * optionally defined by using the default validation errors directive */ private readonly defaultValidationErrors; /** * The control container, if it exists, as one of the 4 form group or form array directives that can "wrap" the control. * It's injected so that we can know if it exists and, if it does, if its form directive has been submitted or not: * the config service shouldDisplayErrors function can choose (and does by default) to use that information. */ private readonly controlContainer; private readonly changeDetectorRef; private readonly destroyRef; readonly vm: Signal; constructor(); ngDoCheck(): void; private shouldDisplayErrors; private findErrorsToDisplay; private findActualControl; private hasDisplayableError; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface ErrorWithDirective { error: ValidationError.WithFieldTree; directive: ValidationErrorDirective; } interface ErrorsToDisplay { errors: Array; fallback: ValidationFallbackDirective | undefined; fallbackErrors: Array; } type ViewModel = { shouldDisplayErrors: false; } | { shouldDisplayErrors: true; errorsToDisplay: ErrorsToDisplay; }; /** * Component allowing to display validation error messages associated to a given field of a signal form. * The control is provided using the `formField` input of the component. * * Example usage: * ``` * * The birth year is mandatory * The max value for the birth year is {{ error.max | number }} * * ``` * * This component, if the control is invalid, displays its validation errors using the provided templates. * The templates, as shown in the above example, have access to the validation error itself. * * The label of the control can also be provided as input, and then used in the templates: * ``` * * {{ label }} is mandatory * The max value for {{ label }} is {{ error.max | number }} * * ``` * * The component‘s behavior is configured globally by the Config service (see its documentation for more details). It can * - display the first error, or all the errors * - add CSS classes to its host `` element * - add CSS classes to each error message element being displayed * - choose when to display the errors (dirty, touched, etc.) * * Global, default templates can be defined (and used by this component) using the default validation errors directive * (see its documentation for details). So, if the default error messages are defined and sufficient for a given control, all you * need is * * ``` * * ``` * * or, if the default templates expect a label: * * ``` * * ``` * * If, however, you want to override one or several error messages by custom ones, you can do so by simply defining them inside the * component: * * ``` * * You're too young, sorry * * ``` * * A fallback template can also be provided. This fallback template is used for all the errors that exist on the form control * but are not handled by any of the specific error templates: * ``` * * You're too young, sorry * {{ label }} has an unhandled error of kind {{ type }}: {{ error | json }} * * ``` * Note that, the fallback template can also be defined in the default validation errors directive (see its documentation for details). * If a fallback template is defined inside `val-signal-errors`, it overrides the default fallback. * * If an error is present on the field, but doesn't have any template, default template or fallback template defined for its type, * then it's not displayed. If the field is valid, or if none of the errors of the component has a matching template or default template, * then this component itself is hidden. */ declare class ValidationSignalErrorsComponent { /** * The FieldTree containing the validation errors. */ readonly formField: i0.InputSignal>; /** * The label of the field, exposed to templates so they can use it in the error message. */ readonly label: i0.InputSignal; /** * The list of validation error directives (i.e. ) contained inside the component element. */ readonly errorDirectives: Signal; /** * The validation fallback directive (i.e. ) contained inside the component element. */ readonly fallbackDirective: Signal; /** * The Config service instance, defining the behavior of this component */ private readonly config; readonly errorsClasses: string; readonly errorClasses: string; /** * The DefaultValidationErrors service instance, holding the default error templates, * optionally defined by using the default validation errors directive */ private readonly defaultValidationErrors; private readonly hasDisplayableError; private readonly shouldDisplayErrors; readonly vm: Signal; private findErrorsToDisplay; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * The display mode of the validation errors. For a given control, either all the validation errors * are displayed, or only the first one. */ declare enum DisplayMode { ALL = 0, ONE = 1 } /** * The configuration service used by the validation errors component to apply common rules for all * form controls. * * To change its default behavior, you can either inject this service in your root module or component and mutate it, * or define your own implementation and provide it. */ declare class ValdemortConfig { /** * The display mode of the errors. The default value is ALL, meaning that all the errors existing on a control * (and which have an error template defined) are displayed. */ displayMode: DisplayMode; /** * Specifies one or several CSS classes (separated by a white space) that are automatically added to the * validation errors element. This can be useful to reuse a standard CSS class of your CSS framework (like * .invalid-feedback in BootStrap), rather than styling the val-errors element itself. * * The default value is null (no class is added). */ errorsClasses: string | null; /** * Specifies one or several CSS classes (separated by a white space) that are automatically added to the * each validation error message element. This can be useful to reuse a standard CSS class of your CSS framework * rather than styling the div element itself. * * The default value is null (no class is added). */ errorClasses: string | null; /** * Specifies when error messages should be displayed based on the state of the control itself (touched, dirty, etc.) * and on the state of the form directive containing it (if any). This function is only called if the control is invalid * in the first place: if it's valid, errors are never displayed. * * The default value of this function returns true if the control is touched, or if the form (if any) is submitted. */ shouldDisplayErrors: (control: AbstractControl, form: NgForm | FormGroupDirective | undefined) => boolean; /** * Specifies when error messages should be displayed based on the state of the field (touched, dirty, etc.). * This function must be reactive (i.e. it must return its value by reading signals). * Note that if the field is valid, errors are never displayed, whatever ths function returns. * * The default value of this function returns true if the field is touched. */ shouldDisplayFieldErrors: (fieldState: FieldState) => boolean; /** * Specifies if the library should throw an error when a control is not found. * For example, this can happen if a typo was made in the `controlName`. * If the check is enabled, then an error will be thrown in such a case. * Otherwise, the error is silently ignored. * * The default value of this function returns false, thus disabling the check. * * You can enable the check by giving it a function that returns true, * or you can enable it only in development for example with: * `config.shouldThrowOnMissingControl = () => !environment.production` */ shouldThrowOnMissingControl: () => boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } declare class ValdemortModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } export { DefaultValidationErrorsDirective, DisplayMode, ValdemortConfig, ValdemortModule, ValidationErrorDirective, ValidationErrorsComponent, ValidationFallbackDirective, ValidationSignalErrorsComponent };