TALY - The Allianz Library
  1. Components
  2. DfInputComponent
libs/core/dynamic-form/input/src/input.component.ts

Extends

DfBaseComponent<DfInputConfig>

Implements

OnInit

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector df-input
styleUrls ./input.component.scss
templateUrl ./input.component.html

Relationships

Used by

Depends on

Index

Properties
Inputs
Outputs

Constructor

constructor()
Defined in libs/core/dynamic-form/input/src/input.component.ts:22

Inputs

control
Type : UntypedFormControl
Default value : new UntypedFormControl()
Inherited from DfBaseComponent
DfBaseComponent:18
config
Type : C
Required :  true
Inherited from DfBaseComponent
DfBaseComponent:67

The configuration object for this formfield.

Note that derived formfield components should extend the DfBaseConfig config interface as needed and expose that their own config interface.
formAclPath
Type : string
Inherited from DfBaseComponent
DfBaseComponent:92
isAclHandled
Type : boolean
Default value : false
Inherited from DfBaseComponent
DfBaseComponent:96
isRetailChannel
Type : boolean
Inherited from DfBaseComponent
DfBaseComponent:94
validationConfigs
Type : ValidationConfig[] | undefined
Inherited from DfBaseComponent
DfBaseComponent:90

Outputs

formEvent
Type : DfEventPayload
Inherited from DfBaseComponent
DfBaseComponent:103

Emits when events associated to the form control happen.

The emitted object contains the data necessary to uniquely identify the event (field id and event type). It also contains the event data.

Properties

componentOrControlInitFinished
Type : unknown
Default value : new ReplaySubject<AbstractControl | undefined>(1)
Inherited from DfBaseComponent
DfBaseComponent:133

This ReplaySubject is provided to emit the control once it is initialized.
errorMessages
Type : WritableSignal<Observable[]>
Default value : signal([])
Inherited from DfBaseComponent
DfBaseComponent:136

The resolved validation error messages for the current control state.
Readonly nxErrorAppearance
Type : ErrorStyleType
Default value : inject(ERROR_DEFAULT_OPTIONS, { optional: true })?.appearance || (inject<CHANNEL>(CHANNEL_TOKEN) === CHANNEL.EXPERT ? 'text' : 'message')
Inherited from DfBaseComponent
DfBaseComponent:148 
import { ValidationConfig } from '@allianz/taly-core';
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { ChangeDetectionStrategy, Component, computed, input, OnInit } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { LocalizeFn } from '@angular/localize/init';
import { DfInputConfig } from './input.model';

declare let $localize: LocalizeFn;

@Component({
  selector: 'df-input',
  styleUrls: ['./input.component.scss'],
  templateUrl: './input.component.html',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfInputComponent extends DfBaseComponent<DfInputConfig> implements OnInit {
  override control = input<UntypedFormControl>(new UntypedFormControl());

  protected hasNxMaskProperty = computed(() => Boolean(this.config().nxMask?.nxMask));

  protected hasIsIbanProperty = computed(() => Boolean(this.config().nxMask?.isIban));

  constructor() {
    super();

    // Setup reactive effect to compute enriched validation configurations
    this.enrichedValidationConfigs = computed(() => {
      const customError = this.config().nxMask?.errorMessage;

      const baseValidations = this.validationConfigs() || [];

      const createValidationConfig = (
        validatorName: string,
        errorMessage: string
      ): ValidationConfig =>
        ({
          validatorName,
          errorMessage: customError || errorMessage
        } as unknown as ValidationConfig);

      if (this.hasIsIbanProperty()) {
        const ibanCountryError = createValidationConfig(
          'nxIbanInvalidCountryError',
          $localize`:@@validation.error.invalid-iban:Please enter a valid IBAN.`
        );
        const ibanParseError = createValidationConfig(
          'nxIbanParseError',
          $localize`:@@validation.error.invalid-iban:Please enter a valid IBAN.`
        );
        return [...baseValidations, ibanCountryError, ibanParseError];
      }

      if (this.hasNxMaskProperty()) {
        const maxLengthError = createValidationConfig(
          'nxMaskLengthError',
          $localize`:@@validation.error.invalid-mask-length:Please enter a valid length.`
        );
        return [...baseValidations, maxLengthError];
      }

      return baseValidations;
    });
  }

  override ngOnInit() {
    super.ngOnInit();
    this.emitFormControlEventOnValueChangesWithDebounce();
  }

  protected override doAdditionalSetup(): void {
    const allowedInputTypesWithNxMask = ['password', 'search', 'tel', 'text', 'url'];
    if (
      this.config().nxMask &&
      this.config().inputType &&
      !allowedInputTypesWithNxMask.includes(this.config().inputType)
    ) {
      this.config().inputType = 'text';
      console.warn(
        `INPUT Dynamic Form: The "inputType" has to be one of: ${allowedInputTypesWithNxMask
          .map((element) => `"${element}"`)
          .join(', ')} when using nxMask. The "inputType" was automatically adjusted to be: "text"`
      );
    }
  }
}

@if (control()) { @if (!hasNxMaskProperty() && !hasIsIbanProperty()) {
<nx-formfield
  [label]="config().label | interpolateFromStore | async"
  [optionalLabel]="(config().optionalLabel | interpolateFromStore | async) || ''"
>
  @if (config().inputPrefix) {
  <span nxFormfieldPrefix>
    {{ config().inputPrefix | interpolateFromStore | async }}
  </span>
  }
  <input
    #inputField
    nxInput
    [formControl]="control()"
    [type]="config().inputType ? config().inputType : 'text'"
    [attr.data-testid]="config().testId"
    [maxLength]="config().maxLength || 524288"
    dfUpperCase
    [placeholder]="(config().placeholder | interpolateFromStore | async) || ''"
    [upperCaseControl]="config().formatUpperCase ? control() : undefined"
    (blur)="emitFormEvent('onBlurEvent', control().value)"
  />
  @if (config().inputSuffix) {
  <span nxFormfieldSuffix>
    {{ config().inputSuffix | interpolateFromStore | async }}
  </span>
  } @if (config().hint) {
  <span nxFormfieldHint>
    {{ config().hint | interpolateFromStore | async }}
  </span>
  } @if (config().infoIcon) {
  <df-info-icon nxFormfieldAppendix [config]="config().infoIcon"></df-info-icon>
  } @for (message$ of errorMessages(); track $index) {
  <nx-error nxFormfieldError [appearance]="nxErrorAppearance">{{ message$ | async }}</nx-error>
  } @if (config().note) {
  <nx-message context="info" nxFormfieldNote>
    <span>{{ config().note | interpolateFromStore | async }}</span>
  </nx-message>
  }
</nx-formfield>
}

<!-- Masked Input -->
@if (hasNxMaskProperty()) {
<nx-formfield
  [label]="config().label | interpolateFromStore | async"
  [optionalLabel]="(config().optionalLabel | interpolateFromStore | async) || ''"
>
  @if (config().inputPrefix) {
  <span nxFormfieldPrefix>
    {{ config().inputPrefix | interpolateFromStore | async }}
  </span>
  }
  <!--Currently there is no way to set inputs conditionally:-->
  <input
    [nxMask]="config().nxMask!.nxMask!"
    [separators]="
      config().nxMask?.separators
        ? config().nxMask!.separators!
        : ['/', '(', ')', '.', ':', '-', ' ', '+', ',']
    "
    [dropSpecialCharacters]="config().nxMask!.dropSpecialCharacters"
    [validateMask]="
      config().nxMask?.validateMask !== undefined ? config().nxMask!.validateMask : true
    "
    [nxConvertTo]="config().nxMask?.convertTo"
    nxInput
    [formControl]="control()"
    [type]="config().inputType ? config().inputType : 'text'"
    [attr.data-testid]="config().testId"
    [maxLength]="config().maxLength || 524288"
    dfUpperCase
    [placeholder]="(config().placeholder | interpolateFromStore | async) || ''"
    [upperCaseControl]="config().formatUpperCase ? control() : undefined"
    (blur)="emitFormEvent('onBlurEvent', control().value)"
  />
  @if (config().inputSuffix) {
  <span nxFormfieldSuffix>
    {{ config().inputSuffix | interpolateFromStore | async }}
  </span>
  } @if (config().hint) {
  <span nxFormfieldHint>
    {{ config().hint | interpolateFromStore | async }}
  </span>
  } @if (config().infoIcon) {
  <df-info-icon nxFormfieldAppendix [config]="config().infoIcon"></df-info-icon>
  } @for (message$ of errorMessages(); track $index) {
  <nx-error nxFormfieldError [appearance]="nxErrorAppearance">{{ message$ | async }}</nx-error>
  } @if (config().note) {
  <nx-message context="info" nxFormfieldNote>
    <span>{{ config().note | interpolateFromStore | async }}</span>
  </nx-message>
  }
</nx-formfield>
}

<!-- Iban Input -->
@if (hasIsIbanProperty()) {
<nx-formfield
  [label]="config().label | interpolateFromStore | async"
  [optionalLabel]="(config().optionalLabel | interpolateFromStore | async) || ''"
>
  @if (config().inputPrefix) {
  <span nxFormfieldPrefix>
    {{ config().inputPrefix | interpolateFromStore | async }}
  </span>
  }
  <!--If we have indicated that is an iban field, then we put the config for iban TODO: Try to dont have this if sctructure-->
  <input
    nxInput
    nxMask
    nxIbanMask
    [formControl]="control()"
    [type]="config().inputType ? config().inputType : 'text'"
    [attr.data-testid]="config().testId"
    [maxLength]="config().maxLength || 524288"
    dfUpperCase
    [placeholder]="(config().placeholder | interpolateFromStore | async) || ''"
    [upperCaseControl]="config().formatUpperCase ? control() : undefined"
    (blur)="emitFormEvent('onBlurEvent', control().value)"
  />
  @if (config().inputSuffix) {
  <span nxFormfieldSuffix>
    {{ config().inputSuffix | interpolateFromStore | async }}
  </span>
  } @if (config().hint) {
  <span nxFormfieldHint>
    {{ config().hint | interpolateFromStore | async }}
  </span>
  } @if (config().infoIcon) {
  <df-info-icon nxFormfieldAppendix [config]="config().infoIcon"></df-info-icon>
  } @for (message$ of errorMessages(); track $index) {
  <nx-error nxFormfieldError [appearance]="nxErrorAppearance">{{ message$ | async }}</nx-error>
  } @if (config().note) {
  <nx-message context="info" nxFormfieldNote>
    <span>{{ config().note | interpolateFromStore | async }}</span>
  </nx-message>
  }
</nx-formfield>
} }

./input.component.scss 

:host {
  display: block;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""