File

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

Extends

DfBaseComponent

Implements

OnInit DoCheck

Metadata

Index

Properties

Constructor

constructor(_parentForm: NgForm | null, _parentFormGroup: FormGroupDirective | null, errorStateMatcher: ErrorStateMatcher)
Parameters :
Name Type Optional
_parentForm NgForm | null No
_parentFormGroup FormGroupDirective | null No
errorStateMatcher ErrorStateMatcher No

Properties

control
Default value : input<UntypedFormControl>(new UntypedFormControl())
Inherited from DfBaseComponent
Defined in DfBaseComponent:17
deferSetupControl
Default value : true
Inherited from DfBaseComponent
Defined in DfBaseComponent:20
SwitcherLabelPosition
Default value : SwitcherLabelPosition
SwitcherSize
Default value : SwitcherSize
aclResource
Type : string
Inherited from DfBaseComponent
Defined in DfBaseComponent:56
componentOrControlInitFinished
Default value : new ReplaySubject<void>(1)
Inherited from DfBaseComponent

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

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.

formAclPath
Default value : input<string>()
Inherited from DfBaseComponent
Defined in DfBaseComponent:89
Readonly formEvent
Default value : output<DfEventPayload>()
Inherited from DfBaseComponent

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, DoCheck, input, OnInit, Optional } from '@angular/core';
import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { ErrorStateMatcher } from '@aposin/ng-aquila/utils';
import { DfSwitcherConfig, SwitcherLabelPosition, SwitcherSize } from './switcher.model';

@Component({
  selector: 'df-switcher',
  styleUrls: ['./switcher.component.scss'],
  templateUrl: './switcher.component.html',
  standalone: false
})
export class DfSwitcherComponent
  extends DfBaseComponent<DfSwitcherConfig>
  implements OnInit, DoCheck
{
  override control = input<UntypedFormControl>(new UntypedFormControl());
  SwitcherLabelPosition = SwitcherLabelPosition;
  SwitcherSize = SwitcherSize;
  override deferSetupControl = true;

  protected errorState = false;

  constructor(
    @Optional() private readonly _parentForm: NgForm | null,
    @Optional() private readonly _parentFormGroup: FormGroupDirective | null,
    private readonly errorStateMatcher: ErrorStateMatcher
  ) {
    super();
  }

  override ngOnInit() {
    // Schedule async execution of `setupFormControl()` to avoid
    // `ExpressionChangedAfterItHasBeenCheckedError`
    // See: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4
    Promise.resolve(null).then(() => {
      this.setupFormControl();

      this.emitFormControlEventOnValueChanges();
    });
  }

  ngDoCheck(): void {
    if (this.control()) {
      // We follow the Aquila approach with the ErrorStateMatcher here:
      // We need to re-evaluate this on every change detection cycle, because there are some
      // error triggers that we can't subscribe to (e.g. parent form submissions). This means
      // that whatever logic is in here has to be super lean or we risk destroying the performance.
      const newErrorState = this.errorStateMatcher.isErrorState(
        this.control(),
        this._parentFormGroup || this._parentForm
      );

      if (this.errorState !== newErrorState) {
        this.errorState = newErrorState;
      }
    }
  }
}
<ng-container *aclTag="aclResource">
  <div class="df-switcher__container">
    <nx-switcher
      [formControl]="control()"
      [id]="config().id"
      [labelPosition]="config().labelPosition || SwitcherLabelPosition.Left"
      [big]="config().size === SwitcherSize.Large"
      [attr.data-testid]="config().testId"
      (focusout)="emitFormEvent('onBlurEvent', control().value)"
    >
      <span nxCopytext>
        <span>{{ config().label | interpolateFromStore | async }}</span>
        <br />
        <span>{{ config().hint | interpolateFromStore | async }}</span>
      </span>
    </nx-switcher>

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

  <div>
    <taly-validation-errors
      *ngIf="this.errorState"
      nxFormfieldError
      [errorMessages]="validationConfigs()"
      [controlErrors]="control().errors"
    >
    </taly-validation-errors>

    <nx-message *ngIf="config().note && !this.errorState" context="info">
      <span>{{ config().note | interpolateFromStore | async }}</span>
    </nx-message>
  </div>
</ng-container>

./switcher.component.scss

:host {
  display: block;
}

.df-switcher__container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""