libs/core/dynamic-form/radio/src/radio.component.ts
| selector | df-radio |
| styleUrls | ./radio.component.scss |
| templateUrl | ./radio.component.html |
Properties |
|
Methods |
| getRadioOptions |
getRadioOptions()
|
|
Returns :
Signal<DfOptions[]>
|
| onBlur | ||||||
onBlur(event: FocusEvent)
|
||||||
|
Parameters :
Returns :
void
|
| control |
Default value : input<UntypedFormControl>(new UntypedFormControl())
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:33
|
| Readonly groupLabelCol |
Default value : computed(() => this.computeGroupLabelCol())
|
| Readonly horizontalOptionsAlignment |
Default value : computed(() => this.computeHorizontalOptionsAlignment())
|
| Readonly labelCenter |
Default value : computed(() => this.isRetailChannel() && this.groupLabelCol() === '12')
|
| radioOptions |
Type : Signal<DfOptions[]>
|
Default value : signal([])
|
| 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 |
| 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 { RowJustification } from '@allianz/ng-aquila/grid';
import {
DfBaseComponent,
DfOptions,
DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import {
Component,
computed,
ElementRef,
inject,
Injector,
input,
OnInit,
runInInjectionContext,
Signal,
signal
} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { UntypedFormControl } from '@angular/forms';
import { DfRadioConfig, VerticalLayout } from './radio.model';
@Component({
selector: 'df-radio',
styleUrls: ['./radio.component.scss'],
templateUrl: './radio.component.html',
standalone: false
})
export class DfRadioComponent extends DfBaseComponent<DfRadioConfig> implements OnInit {
private optionsProviderService = inject(DfOptionsProviderService, { optional: true });
private el = inject(ElementRef);
override control = input<UntypedFormControl>(new UntypedFormControl());
radioOptions: Signal<DfOptions[]> = signal([]);
readonly horizontalOptionsAlignment = computed(() => this.computeHorizontalOptionsAlignment());
readonly groupLabelCol = computed(() => this.computeGroupLabelCol());
readonly labelCenter = computed(() => this.isRetailChannel() && this.groupLabelCol() === '12');
private inject = inject(Injector);
override ngOnInit() {
super.ngOnInit();
this.radioOptions = this.getRadioOptions();
this.emitFormControlEventOnValueChanges();
}
getRadioOptions(): Signal<DfOptions[]> {
const configValue = this.config();
if (Array.isArray(configValue.options)) {
return signal(configValue.options);
}
if (typeof configValue.options === 'string' && this.optionsProviderService) {
return runInInjectionContext(this.inject, () =>
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
toSignal(this.optionsProviderService!.getDfOptions(configValue.options as string), {
initialValue: []
})
);
}
return signal([]);
}
onBlur(event: FocusEvent) {
const radioGroupHasFocus = this.el.nativeElement.contains(event.relatedTarget);
if (radioGroupHasFocus) {
return;
}
this.emitFormEvent('onBlurEvent', this.control().value);
}
private computeHorizontalOptionsAlignment() {
let alignment: RowJustification = 'start';
if (this.config().layout?.horizontal) {
const itemsPerRow = Math.floor(12 / (this.config().layout?.optionsColumnSpan || 4));
const hasMultipleRows = this.radioOptions().length > itemsPerRow;
if (this.isRetailChannel() && !hasMultipleRows) {
alignment = 'center';
}
}
return alignment;
}
private computeGroupLabelCol() {
if (
this.isRetailChannel() &&
(this.config().layout as VerticalLayout)?.groupLabelLeftAlignInRetail
) {
return `12, 12, ${this.config().layout?.optionsColumnSpan || 4}`;
}
return '12';
}
}
<ng-container *aclTag="aclResource">
<!--Note: We use <fieldset> and <legend> to mark up this group for better a11y.
This way, assistive tech can associate the label text inside <legend> with the group.
If we use other elements (e.g. <h3> or <p>), it can't and, for example, a screenreader
may not read it out at all.
See: https://accessibility.blog.gov.uk/2016/07/22/using-the-fieldset-and-legend-elements/-->
<fieldset nxLayout="grid nopadding" [containerQuery]="true">
<div nxRow [rowJustify]="isRetailChannel() ? 'center' : 'start'">
<div
[nxCol]="groupLabelCol()"
[ngClass]="{ 'text-center': labelCenter() }"
data-testid="groupLabelCol"
>
<nx-label
data-testid="radioLabel"
[size]="isRetailChannel() ? 'large' : 'small'"
[ngClass]="{
'nx-font-weight-regular': isRetailChannel(),
'text-center': labelCenter()
}"
>{{ config().label | interpolateFromStore | async }}@if (config().infoIcon) {
<df-info-icon nxFormfieldAppendix [config]="config().infoIcon"></df-info-icon>
}
</nx-label>
</div>
</div>
<nx-radio-group
[formControl]="control()"
[id]="config().id"
[name]="config().id"
[attr.data-testid]="config().testId"
(focusout)="onBlur($event)"
>
@if (config().layout?.horizontal) {
<div nxRow [rowJustify]="horizontalOptionsAlignment()" data-testid="rowInHorizontalLayout">
@for (option of radioOptions(); track $index) {
<div
[nxCol]="`12, 12, ${config().layout?.optionsColumnSpan || 4}`"
data-testid="columnInHorizontalLayout"
>
<nx-radio
[labelSize]="isRetailChannel() ? 'big' : 'small'"
[value]="option.value"
[attr.data-testid]="option?.testId"
><span>{{ option.label | interpolateFromStore | async }}</span>
</nx-radio>
</div>
}
</div>
} @else { @for (option of radioOptions(); track $index) {
<div
nxRow
[rowJustify]="isRetailChannel() ? 'center' : 'start'"
data-testid="rowInVerticalLayout"
>
<div
[nxCol]="`12, 12, ${config().layout?.optionsColumnSpan || 4}`"
data-testid="columnInVerticalLayout"
>
<nx-radio
[labelSize]="isRetailChannel() ? 'big' : 'small'"
[value]="option.value"
[attr.data-testid]="option?.testId"
><span>{{ option.label | interpolateFromStore | async }}</span>
</nx-radio>
</div>
</div>
} }
<taly-validation-errors
ngProjectAs="nx-error"
nxFormfieldError
[errorMessages]="validationConfigs()"
[controlErrors]="control().errors"
>
</taly-validation-errors>
</nx-radio-group>
@if (config().note && !(control().touched && control().invalid)) {
<nx-message context="info">
<span>{{ config().note | interpolateFromStore | async }}</span>
</nx-message>
}
</fieldset>
</ng-container>
./radio.component.scss
@use '../../src/breakpoints.scss' as *;
:host {
display: block;
}
nx-radio {
margin-top: var(--vertical-inner-section-spacing);
}
nx-label {
display: inline-flex;
align-items: center;
}
df-info-icon {
display: inline-flex;
align-items: center;
padding-left: 8px;
}
.text-center {
text-align: center;
}