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
Readonly controlChanged
Public deferSetupControl
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<void>(1)

Inherited from DfBaseComponent

Defined in DfBaseComponent:116

Additionally to the controlChanged EventEmitter a ReplaySubject is provided. In difference to the EventEmitter, this one always contains the last emitted value, which allows to check if a component was initialized after the initialization already happened. (An event will be gone at that point in time.)

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.

Readonly controlChanged

Default value : output<AbstractControl | undefined>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:101

Emits the AbstractControl associated with this formfield, once it has been fully configured (i.e. its initial value and validators have been added as per the config).

Applications that need to further process this AbstractControl (e.g. to add more validators) should therefore wait for this event to be emitted.

Public deferSetupControl

Default value : false

Inherited from DfBaseComponent

Defined in DfBaseComponent:126

By default, the AbstractControl is configured in ngOnInit(), however in some cases this causes an ExpressionChangedAfterItHasBeenCheckedError.

If this is set to true, the setup will not be run automatically. It is then the derived component's responsibility to run call setupFormControl() at the appropriate time.

formAclPath

Default value : input<string>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:89

Readonly formEvent

Default value : output<DfEventPayload>()

Inherited from DfBaseComponent

Defined in DfBaseComponent:108

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?.config"
      [modalConfig]="config().infoIcon?.modalConfig"
    ></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?.config"
      [modalConfig]="config().infoIcon?.modalConfig"
    ></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?.config"
      [modalConfig]="config().infoIcon?.modalConfig"
    ></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 ""