import { AfterContentInit , ContentChild , ContentChildren , Directive , QueryList } from '@angular/core' ; import { DefaultValidationErrors } from './default-validation-errors.service' ; import { ValidationErrorDirective } from './validation-error.directive' ; import { ValidationFallbackDirective } from './validation-fallback.directive' ; /**
 * 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:
 * ```
 *   <val-default-errors>
 *     <ng-template valError="required">This field is mandatory</ng-template>
 *     <ng-template valError="max" let-error="error">This field must be at most {{ error.max | number }}</ng-template>
 *   </val-default-errors>
 * ```
 *
 * Example usage where a label is used to make the messages less generic:
 * ```
 *   <val-default-errors>
 *     <ng-template valError="required" let-label>{{ label }} is mandatory</ng-template>
 *     <ng-template valError="max" let-error="error" let-label>{{ label }} must be at most {{ error.max | number }}</ng-template>
 *   </val-default-errors>
 * ```
 *
 * 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:
 * ```
 *   <val-default-errors>
 *     <ng-template valError="required" let-label>{{ label }} is mandatory</ng-template>
 *     <ng-template valError="max" let-error="error" let-label>{{ label }} must be at most {{ error.max | number }}</ng-template>
 *     <ng-template valFallback let-label let-type="type" let-error="error">{{ label }} has an unhandled error of type {{ type }}: {{ error | json }}</ng-template>
 *   </val-default-errors>
 * ```
 * 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.
 */ @ Directive ( { selector : 'val-default-errors' , host : { style : 'display: none' } } ) export class DefaultValidationErrorsDirective implements AfterContentInit { constructor ( private defaultValidationErrors ) { } /**
     * The list of validation error directives (i.e. <ng-template valError="...">)
     * contained inside the directive element.
     */ @ ContentChildren ( ValidationErrorDirective ) errorDirectives ! : QueryList < ValidationErrorDirective > ; /**
     * The validation fallback directive (i.e. <ng-template valFallback>) contained inside the directive element.
     */ @ ContentChild ( ValidationFallbackDirective ) fallbackDirective : ValidationFallbackDirective | undefined ; ngAfterContentInit ( ) { this . defaultValidationErrors . directives = this . errorDirectives . toArray ( ) ; this . defaultValidationErrors . fallback = this . fallbackDirective ; } }