File

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

Extends

DfBaseComponent

Implements

OnInit

Metadata

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

Index

Properties

control
Optional labelAlwaysFloating
aclResource
componentOrControlInitFinished
config
formAclPath
Readonly formEvent
isRetailChannel
validationConfigs

Constructor

constructor(formfieldDefaultOptions: FormfieldDefaultOptions)

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

Parameters :

Name	Type	Optional
formfieldDefaultOptions	`FormfieldDefaultOptions`	No

Properties

control

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

Inherited from DfBaseComponent

Defined in DfBaseComponent:14

Optional labelAlwaysFloating

Type : boolean

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

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 { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import { Component, Inject, input, OnInit, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { FORMFIELD_DEFAULT_OPTIONS, FormfieldDefaultOptions } from '@aposin/ng-aquila/formfield';
import { DfInputConfig } from './input.model';

@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());
  labelAlwaysFloating?: boolean;

  constructor(
    @Optional()
    @Inject(FORMFIELD_DEFAULT_OPTIONS)
    private formfieldDefaultOptions: FormfieldDefaultOptions
  ) {
    super();
  }

  override ngOnInit() {
    super.ngOnInit();
    /* If label is not floating, then we pass the label to the nx-formfield.
     ** TODO: exchange this logic when NDBX support that with this config is supported multiple lines
     */
    this.labelAlwaysFloating = this.formfieldDefaultOptions?.nxFloatLabel === 'always';

    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()) {
  <span nxCopytext class="own-label nx-font-weight-semibold" *ngIf="labelAlwaysFloating">
    {{ config().label | interpolateFromStore | async }}
    <span *ngIf="config().optionalLabel" class="nx-font-weight-regular">
      ({{ config().optionalLabel | interpolateFromStore | async }})</span
    >
  </span>
  <nx-formfield
    *ngIf="!config().nxMask && !config().isIban"
    [label]="!labelAlwaysFloating ? (config().label | interpolateFromStore | async) : ''"
    [optionalLabel]="
      !labelAlwaysFloating ? (config().optionalLabel | interpolateFromStore | async) || '' : ''
    "
  >
    <span *ngIf="config().inputPrefix" 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)"
    />

    <span *ngIf="config().inputSuffix" nxFormfieldSuffix>
      {{ config().inputSuffix | interpolateFromStore | async }}
    </span>

    <span *ngIf="config().hint" nxFormfieldHint>
      {{ config().hint | interpolateFromStore | async }}
    </span>

    <df-info-icon
      *ngIf="config().infoIcon"
      nxFormfieldAppendix
      [config]="config().infoIcon"
    ></df-info-icon>

    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>

    <nx-message *ngIf="config().note" context="info" nxFormfieldNote>
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
  </nx-formfield>
  <nx-formfield
    *ngIf="config().nxMask"
    [label]="!labelAlwaysFloating ? (config().label | interpolateFromStore | async) : ''"
    [optionalLabel]="
      !labelAlwaysFloating ? (config().optionalLabel | interpolateFromStore | async) || '' : ''
    "
  >
    <span *ngIf="config().inputPrefix" 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)"
    />

    <span *ngIf="config().inputSuffix" nxFormfieldSuffix>
      {{ config().inputSuffix | interpolateFromStore | async }}
    </span>

    <span *ngIf="config().hint" nxFormfieldHint>
      {{ config().hint | interpolateFromStore | async }}
    </span>

    <df-info-icon
      *ngIf="config().infoIcon"
      nxFormfieldAppendix
      [config]="config().infoIcon"
    ></df-info-icon>

    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>

    <nx-message *ngIf="config().note" context="info" nxFormfieldNote>
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
  </nx-formfield>
  <nx-formfield
    *ngIf="config().isIban && !config().nxMask"
    [label]="!labelAlwaysFloating ? (config().label | interpolateFromStore | async) : ''"
    [optionalLabel]="
      !labelAlwaysFloating ? (config().optionalLabel | interpolateFromStore | async) || '' : ''
    "
  >
    <span *ngIf="config().inputPrefix" 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)"
    />

    <span *ngIf="config().inputSuffix" nxFormfieldSuffix>
      {{ config().inputSuffix | interpolateFromStore | async }}
    </span>

    <span *ngIf="config().hint" nxFormfieldHint>
      {{ config().hint | interpolateFromStore | async }}
    </span>

    <df-info-icon
      *ngIf="config().infoIcon"
      nxFormfieldAppendix
      [config]="config().infoIcon"
    ></df-info-icon>

    <taly-validation-errors
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>

    <nx-message *ngIf="config().note" 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;
}

/* Own label management.TODO: Remove when NDBX support multiple lines */
::ng-deep.own-label + * {
  .nx-formfield__wrapper {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
  }
}

Legend

Html element

Component

Html element with directive

File

Extends

Implements

Metadata

Index

Properties

Constructor

Properties

results matching ""

No results matching ""