Fix: custom error not shown for inputLayoutDateTime #185

apps/doc/src/app/components/dialogs/dialog/examples/with-parent/dialog-with-parent-example.component.html

@@ -15,7 +15,7 @@
  <h4>Check Dropdown Host Parent Container And Position</h4>
  <prizm-input-layout label="Validators">
  <prizm-input-select #input [formControl]="control" [items]="items"> </prizm-input-select>
- <ng-template [control]="input" prizmInputStatusText>dddd</ng-template>
+ <ng-template [control]="input" prizmInputStatusText></ng-template>
  </prizm-input-layout>
 </ng-template>
 

apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.html

@@ -1,3 +1,12 @@
 <prizm-input-layout label="Введите дату">
  <prizm-input-layout-date-time [formControl]="value"></prizm-input-layout-date-time>
 </prizm-input-layout>
+
+<br />
+
+<h3>With custom error text</h3>
+
+<prizm-input-layout label="Введите дату">
+ <prizm-input-layout-date-time #control [formControl]="customErrorValue"></prizm-input-layout-date-time>
+ <ng-template #statusText [control]="control" prizmInputStatusText>Warning text</ng-template>
+</prizm-input-layout>

apps/doc/src/app/components/input/input-layout-date-time/examples/required/input-layout-date-time-required-example.component.ts

@@ -19,4 +19,9 @@ export class PrizmInputLayoutDateTimeRequiredExampleComponent {
  [new PrizmDay(2017, 2, 15), new PrizmTime(12, 30)],
  [Validators.required]
  );
+
+ public readonly customErrorValue = new UntypedFormControl(
+ [new PrizmDay(2017, 2, 15), new PrizmTime(12, 30)],
+ [Validators.required]
+ );
 }

apps/doc/src/app/components/input/input-mask/input-mask-example.component.html

@@ -30,7 +30,7 @@
  prizmDocHostElementKey="PrizmInputText"
  prizmInput
  />
- <ng-template prizmInputStatusText>Текст статуса</ng-template>
+ <ng-template [control]="input" prizmInputStatusText></ng-template>
  </prizm-input-layout>
  </prizm-doc-demo>
 

apps/doc/src/app/components/input/input-number/input-number-example.component.html

@@ -66,7 +66,7 @@ <h4>Number</h4>
  prizm-input-right
  ></prizm-input-number-auxiliary-controls>
 
- <ng-template prizmInputStatusText>Текст статуса</ng-template>
+ <ng-template [control]="prizmInputNumber" prizmInputStatusText></ng-template>
  </prizm-input-layout>
  </div>
  <div>
@@ -93,6 +93,7 @@ <h4>Counter</h4>
  ></button>
 
  <input
+ #prizmCounter
  #inputCounter="prizmInputNumber"
  [formControl]="requiredInputControl"
  [min]="min"
@@ -117,7 +118,7 @@ <h4>Counter</h4>
  prizm-input-right
  ></button>
 
- <ng-template prizmInputStatusText>Текст статуса</ng-template>
+ <ng-template [control]="prizmCounter" prizmInputStatusText></ng-template>
  </prizm-input-layout>
  </div>
  </div>

apps/doc/src/app/components/input/input-password/input-password-example.component.html

@@ -27,7 +27,7 @@
  prizmDocHostElementKey="inputPasswordAuxiliaryControl"
  prizm-input-right
  ></prizm-input-password-auxiliary-control>
- <ng-template prizmInputStatusText>Текст статуса</ng-template>
+ <ng-template [control]="inputPas" prizmInputStatusText></ng-template>
  </prizm-input-layout>
  </prizm-doc-demo>
 

apps/doc/src/app/components/input/input-select/examples/base/select-base-example.component.html

@@ -1,12 +1,6 @@
 <prizm-input-layout label="Validators">
  <prizm-input-select #input [formControl]="control" [items]="items"></prizm-input-select>
- <!-- <ng-template [control]="input" prizmInputStatusText></ng-template>-->
- <!-- <prizm-input-status-subtext [control]="input" prizm-input-subtext></prizm-input-status-subtext>-->
- <!-- <ng-template prizmInputStatusText>{{-->
- <!-- 'ErrorRequired'-->
- <!-- }}</ng-template>-->
-
- <ng-template [control]="$any(input)" prizmInputStatusText>dddd</ng-template>
+ <ng-template [control]="input" prizmInputStatusText></ng-template>
 </prizm-input-layout>
 <br />
 <br />

apps/doc/src/app/components/input/input-select/examples/full-width/select-full-width-example.component.html

@@ -1,7 +1,6 @@
 <prizm-input-layout label="Validators">
  <prizm-input-select [formControl]="control" [items]="items" style="width: 100%"></prizm-input-select>
 </prizm-input-layout>
-<!--<prizm-select style="width: 100%" [formControl]="control" [items]="items"></prizm-select>-->
 <br />
 <br />
 <div>

apps/doc/src/app/components/input/input-select/examples/virtual-scroll/select-virtual-scroll-example.component.html

@@ -9,7 +9,7 @@
  </prizm-scrollbar>
  </prizm-input-select>
 
- <ng-template [control]="$any(input)" prizmInputStatusText>dddd</ng-template>
+ <ng-template [control]="input" prizmInputStatusText></ng-template>
 </prizm-input-layout>
 <br />
 <br />

apps/doc/src/app/components/input/input-text/examples/input-validation-custom-example/input-validation-custom-texts.service.ts

@@ -3,7 +3,7 @@ import { PrizmInputControl, PrizmInputValidationTexts } from '@prizm-ui/componen
 
 @Injectable()
 export class InputValidationCustomTextsService extends PrizmInputValidationTexts {
- private readonly invalidTextCustomMap = new Map<string, string>([['required', 'Обязательное поле']]);
+ private readonly invalidTextCustomMap = new Map<string, string>([['required', 'Самое обязательное поле']]);
 
  public override getText(key: string, control?: PrizmInputControl<unknown>): string | undefined {
  return this.invalidTextCustomMap.get(key);

libs/components/src/lib/components/input/common/input-layout/input-layout.component.ts

@@ -20,7 +20,7 @@ import { PrizmInputControl } from '../base/input-control.class';
 import { PrizmInputStatusTextDirective } from '../input-status-text/input-status-text.directive';
 import { PrizmInputPosition, PrizmInputSize, PrizmInputStatus } from '../models/prizm-input.models';
 import { debounceTime, map, startWith, takeUntil, tap } from 'rxjs/operators';
-import { isPolymorphPrimitive, PolymorphComponent, PolymorphContent } from '../../../../directives/polymorph';
+import { isPolymorphPrimitive, PolymorphContent } from '../../../../directives/polymorph';
 import { Compare, filterTruthy, PrizmDestroyService, PrizmLetDirective } from '@prizm-ui/helpers';
 import { PrizmAbstractTestId } from '../../../../abstract/interactive';
 

libs/components/src/lib/components/input/common/input-status-text/input-status-text.directive.ts

@@ -23,11 +23,11 @@ export class PrizmInputStatusTextDirective extends DefaultInputInvalidTextClass
 
  protected override setInvalidText(text: string): void {
  super.setInvalidText(text);
-
  this.changed.next();
  }
 
  public getStatusMessage(): PolymorphContent {
- return this.invalidText || this.templateRef;
+ const isTemplateEmpty = !this.templateRef.createEmbeddedView(null).rootNodes[0];
+ return isTemplateEmpty ? this.invalidText : this.templateRef;
  }
 }

libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.html

@@ -10,7 +10,6 @@
  [closeByEsc]="true"
  (isOpenChange)="onOpenChange($event); $event && prizmDropdownHostComponent.reCalculatePositions()"
 >
- <ng-template prizmInputStatusText>Ошибка! Неправильный формат</ng-template>
  <div
  class="multiple-input-box"
  #focusableElementRef="prizmInputZone"
@@ -118,3 +117,7 @@
  </ng-container>
  </prizm-data-list>
 </ng-template>
+
+<ng-template [enable]="!!ngControl.errors?.requiredPattern" prizmInputStatusText status="danger">
+ {{ dictionary$ | async | prizmPluck : 'wrongFormat' }}
+</ng-template>

libs/components/src/lib/components/input/input-date-time/input-layout-date-time.component.ts

@@ -23,7 +23,7 @@ import { PRIZM_ALWAYS_FALSE_HANDLER } from '../../../constants/always-false-hand
 import { PRIZM_DATE_TIME_SEPARATOR } from '../../../constants/date-time-separator';
 import { prizmDefaultProp, prizmPure } from '@prizm-ui/core';
 import { PRIZM_DATE_TIME_VALUE_TRANSFORMER } from '../../../tokens/date-inputs-value-transformers';
-import { PRIZM_DATE_TEXTS, PRIZM_TIME_TEXTS } from '../../../tokens/i18n';
+import { PRIZM_DATE_TEXTS, PRIZM_INPUT_LAYOUT_DATE_TIME, PRIZM_TIME_TEXTS } from '../../../tokens/i18n';
 import { PrizmContextWithImplicit } from '../../../types/context-with-implicit';
 import { PrizmControlValueTransformer } from '../../../types/control-value-transformer';
 import { PrizmDateMode } from '../../../types/date-mode';
@@ -36,8 +36,8 @@ import { prizmClamp } from '../../../util/math/clamp';
 import { PRIZM_DATE_RIGHT_BUTTONS } from '../../../tokens/date-extra-buttons';
 import { PrizmDateButton } from '../../../types/date-button';
 import { PRIZM_STRICT_MATCHER } from '../../../constants';
-import { filterTruthy, PrizmDestroyService } from '@prizm-ui/helpers';
-import { PrizmInputControl, PrizmInputNgControl } from '../common';
+import { filterTruthy, PrizmDestroyService, PrizmPluckPipe } from '@prizm-ui/helpers';
+import { PrizmInputControl, PrizmInputNgControl, PrizmInputStatusTextDirective } from '../common';
 import { PrizmInputZoneDirective, PrizmInputZoneModule } from '../../../directives/input-zone';
 import { debounceTime, delay, map, takeUntil } from 'rxjs/operators';
 import { PrizmLifecycleModule } from '../../../directives/lifecycle';
@@ -58,6 +58,7 @@ import { PrizmCalendarComponent } from '../../calendar';
 import { PrizmLinkComponent } from '../../link';
 import { PrizmValueAccessorModule } from '../../../directives/value-accessor/value-accessor.module';
 import { PrizmListingItemComponent } from '../../listing-item';
+import { PrizmLanguageInputLayoutDateTime } from '@prizm-ui/i18n';
 
 @Component({
  selector: `prizm-input-layout-date-time`,
@@ -71,6 +72,7 @@ import { PrizmListingItemComponent } from '../../listing-item';
  ...prizmI18nInitWithKeys({
  time: PRIZM_TIME_TEXTS,
  dateTexts: PRIZM_DATE_TEXTS,
+ inputLayoutDateTime: PRIZM_INPUT_LAYOUT_DATE_TIME,
  }),
  ...PRIZM_INPUT_DATE_TIME_PROVIDERS,
  {
@@ -103,6 +105,7 @@ import { PrizmListingItemComponent } from '../../listing-item';
  PrizmValueAccessorModule,
  PrizmInputNativeValueModule,
  PrizmListingItemComponent,
+ PrizmPluckPipe,
  ],
 })
 export class PrizmInputLayoutDateTimeComponent
@@ -118,6 +121,9 @@ export class PrizmInputLayoutDateTimeComponent
  @ViewChild('focusableElementRef', { read: PrizmInputZoneDirective })
  public override readonly focusableElement?: PrizmInputZoneDirective;
 
+ @ViewChild(PrizmInputStatusTextDirective, { static: true })
+ override statusText!: PrizmInputStatusTextDirective;
+
  @Input()
  @prizmDefaultProp()
  timeItems: readonly PrizmTime[] = new Array(24).fill(null).map((_, i) => new PrizmTime(i, 0, 0, 0));
@@ -182,6 +188,8 @@ export class PrizmInputLayoutDateTimeComponent
  injector: Injector,
  @Inject(PRIZM_DATE_TEXTS)
  readonly dateTexts$: Observable<Record<PrizmDateMode, string>>,
+ @Inject(PRIZM_INPUT_LAYOUT_DATE_TIME)
+ public readonly dictionary$: Observable<PrizmLanguageInputLayoutDateTime['inputLayoutDateTime']>,
  @Optional()
  @Inject(PRIZM_DATE_TIME_VALUE_TRANSFORMER)
  valueTransformer: PrizmControlValueTransformer<[PrizmDay | null, PrizmTime | null] | null> | null

libs/components/src/lib/tokens/i18n.ts

@@ -7,6 +7,7 @@ import {
  PrizmLanguageCron,
  PrizmLanguageFileUpload,
  PrizmLanguageInputLayoutDateRelative,
+ PrizmLanguageInputLayoutDateTime,
  PrizmLanguageKit,
  PrizmLanguagePaginator,
 } from '@prizm-ui/i18n';
@@ -19,6 +20,10 @@ export const PRIZM_INPUT_LAYOUT_DATE_RELATIVE = new InjectionToken<
  Observable<PrizmLanguageInputLayoutDateRelative['inputLayoutDateRelative']>
 >(`Localized for input layout date relative component`);
 
+export const PRIZM_INPUT_LAYOUT_DATE_TIME = new InjectionToken<
+ Observable<PrizmLanguageInputLayoutDateTime['inputLayoutDateTime']>
+>(`Localized for input layout date time component`);
+
 export const PRIZM_CRON = new InjectionToken<Observable<PrizmLanguageCron['cron']>>(
  `Localized for cron component`
 );

libs/i18n/src/lib/interfaces/language.ts

@@ -21,6 +21,11 @@ export interface PrizmLanguageInputLayoutDateRelative {
  wrongFormat: string;
  };
 }
+export interface PrizmLanguageInputLayoutDateTime {
+ inputLayoutDateTime: {
+ wrongFormat: string;
+ };
+}
 export interface PrizmLanguageCron {
  cron: {
  title: string;
@@ -219,6 +224,7 @@ export interface PrizmLanguage
  PrizmLanguageMeta,
  PrizmLanguageCron,
  PrizmLanguageInputLayoutDateRelative,
+ PrizmLanguageInputLayoutDateTime,
  PrizmLanguageFileUpload,
  PrizmLanguageColumnSettings,
  PrizmLanguagePaginator {}

libs/i18n/src/lib/languages/russian/input-layout-date-time.ts

@@ -0,0 +1,7 @@
+import { PrizmLanguageInputLayoutDateTime } from '../../interfaces';
+
+export const PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME: PrizmLanguageInputLayoutDateTime = {
+ inputLayoutDateTime: {
+ wrongFormat: 'Неправильный формат данных',
+ },
+};

libs/i18n/src/lib/languages/russian/russian.ts

@@ -6,6 +6,7 @@ import { PRIZM_RUSSIAN_CRON } from './cron';
 import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_RELATIVE } from './input-date-layout-relative';
 import { PRIZM_RUSSIAN_COLUMN_SETTINGS } from './column-settings';
 import { PRIZM_RUSSIAN_PAGINATOR } from './paginator';
+import { PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME } from './input-layout-date-time';
 
 export const PRIZM_RUSSIAN_LANGUAGE = {
  name: `russian`,
@@ -14,6 +15,7 @@ export const PRIZM_RUSSIAN_LANGUAGE = {
  ...PRIZM_RUSSIAN_LANGUAGE_KIT,
  ...PRIZM_RUSSIAN_FILE_UPLOAD,
  ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_RELATIVE,
+ ...PRIZM_RUSSIAN_INPUT_LAYOUT_DATE_TIME,
  ...PRIZM_RUSSIAN_CRON,
  ...PRIZM_RUSSIAN_COLUMN_SETTINGS,
  ...PRIZM_RUSSIAN_PAGINATOR,