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

Extends

DfBaseComponent<DfSwitcherConfig>

Implements

OnInit DoCheck

Metadata

Relationships

Index

Properties
Inputs
Outputs

Inputs

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

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
isAclHandled
Type : boolean
Default value : false
Inherited from DfBaseComponent
isRetailChannel
Type : boolean
Inherited from DfBaseComponent
validationConfigs
Type : ValidationConfig[] | undefined
Inherited from DfBaseComponent

Outputs

formEvent
Type : 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.

Properties

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

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

errorMessages
Type : WritableSignal<Observable[]>
Default value : signal([])
Inherited from DfBaseComponent

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
import { DfBaseComponent } from '@allianz/taly-core/dynamic-form';
import {
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  DoCheck,
  input,
  OnInit,
  inject
} from '@angular/core';
import { FormGroupDirective, NgForm, UntypedFormControl } from '@angular/forms';
import { ErrorStateMatcher } from '@allianz/ng-aquila/utils';
import { DfSwitcherConfig, SwitcherLabelPosition, SwitcherSize } from './switcher.model';

@Component({
  selector: 'df-switcher',
  styleUrls: ['./switcher.component.scss'],
  templateUrl: './switcher.component.html',
  standalone: false,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfSwitcherComponent
  extends DfBaseComponent<DfSwitcherConfig>
  implements OnInit, DoCheck
{
  private readonly _parentForm = inject(NgForm, { optional: true });
  private readonly _parentFormGroup = inject(FormGroupDirective, { optional: true });
  private readonly errorStateMatcher = inject(ErrorStateMatcher);
  private readonly cdr = inject(ChangeDetectorRef);

  override control = input<UntypedFormControl>(new UntypedFormControl());
  SwitcherLabelPosition = SwitcherLabelPosition;
  SwitcherSize = SwitcherSize;

  protected errorState = false;

  override ngOnInit() {
    super.ngOnInit();
    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;
        this.cdr.markForCheck();
      }
    }
  }
}
<nx-switcher
  [formControl]="control()"
  [labelPosition]="config().labelPosition || SwitcherLabelPosition.Left"
  [big]="config().size === SwitcherSize.Large"
  [attr.data-testid]="config().testId"
  (focusout)="emitFormEvent('onBlurEvent', control().value)"
>
  <div class="df-switcher__label-container">
    <div nxCopytext class="nx-margin-0">
      <span>{{ config().label | interpolateFromStore | async }}</span>
      <br />
      <span>{{ config().hint | interpolateFromStore | async }}</span>
    </div>
    @if (config().infoIcon) {
    <df-info-icon [config]="config().infoIcon"></df-info-icon>
    }
  </div>

  @for (message$ of errorMessages(); track $index) {
  <nx-error [appearance]="nxErrorAppearance">{{ message$ | async }}</nx-error>
  }
</nx-switcher>

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

./switcher.component.scss

:host {
  display: block;
}

.df-switcher__label-container {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: left;
}

.df-info-icon {
  align-self: start;
  // Used to compensate the icon top position with the switcher
  position: relative;
  bottom: 2px;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""