File

libs/core/dynamic-form/input/src/input.component.ts

Extends

DfBaseComponent

Implements

Metadata

selector	`df-input`
styleUrls	`./input.component.scss`
templateUrl	`./input.component.html`

Index

Properties

control
aclResource
componentOrControlInitFinished
config
formAclPath
Readonly formEvent
isRetailChannel
validationConfigs

Constructor

constructor()

Defined in libs/core/dynamic-form/input/src/input.component.ts:24

Properties

control

Default value : input<UntypedFormControl>(new UntypedFormControl())

Inherited from DfBaseComponent

Defined in DfBaseComponent:17

aclResource

Type : string

Inherited from DfBaseComponent

Defined in DfBaseComponent:56

componentOrControlInitFinished

Default value : new ReplaySubject<AbstractControl | undefined>(1)

Inherited from DfBaseComponent

Defined in DfBaseComponent:103

This ReplaySubject is provided to emit the control once it is initialized.

config

Type : InputSignal<C>

Default value : input.required<C>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:64

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

Default value : input<string>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:89

Readonly formEvent

Default value : output<DfEventPayload>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:98

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.

isRetailChannel

Default value : input<boolean>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:91

validationConfigs

Default value : input<ValidationConfig[] | undefined>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:87

import { ValidationConfig } from '@allianz/taly-core';
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { Component, computed, input, OnInit, Signal, signal } 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
})
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));

  // Holds the list of enriched validation configurations, including mask-related validations
  protected enrichedValidationConfigs: Signal<ValidationConfig[]> = signal([]);

  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"`
      );
    }
  }
}

<ng-container *aclTag="aclResource">
  @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()"
      [id]="config().id"
      [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>
    }
    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>
    @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()"
      [id]="config().id"
      [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>
    }
    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="enrichedValidationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>
    @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()"
      [id]="config().id"
      [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>
    }
    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="enrichedValidationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>
    @if (config().note) {
    <nx-message context="info" nxFormfieldNote>
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
    }
  </nx-formfield>
  } }
</ng-container>

./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 ""