libs/core/dynamic-form/radio/src/radio.component.ts
| selector | df-radio |
| styleUrls | ./radio.component.scss |
| templateUrl | ./radio.component.html |
Properties |
Methods |
constructor(optionsProviderService: DfOptionsProviderService, el: ElementRef)
|
|||||||||
|
Parameters :
|
| getRadioOptions |
getRadioOptions()
|
|
Returns :
Observable<DfOptions[]>
|
| onBlur | ||||||
onBlur(event: FocusEvent)
|
||||||
|
Parameters :
Returns :
void
|
| control |
Default value : input<UntypedFormControl>(new UntypedFormControl())
|
|
Inherited from
DfBaseComponent
|
|
Defined in
DfBaseComponent:19
|
| radioOptions$ |
Type : Observable<DfOptions[]> | undefined
|
| 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 { Component, ElementRef, input, OnInit, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import {
DfBaseComponent,
DfOptions,
DfOptionsProviderService
} from '@allianz/taly-core/dynamic-form';
import { Observable, of } from 'rxjs';
import { DfRadioConfig } 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 {
override control = input<UntypedFormControl>(new UntypedFormControl());
radioOptions$: Observable<DfOptions[]> | undefined;
constructor(
@Optional() private optionsProviderService: DfOptionsProviderService,
private el: ElementRef
) {
super();
}
override ngOnInit() {
super.ngOnInit();
this.radioOptions$ = this.getRadioOptions();
this.emitFormControlEventOnValueChanges();
}
// TODO: Change this to be an impure pipe
getRadioOptions(): Observable<DfOptions[]> {
const configValue = this.config();
if (Array.isArray(configValue.options)) {
return of(configValue.options);
}
if (typeof configValue.options === 'string' && this.optionsProviderService) {
return this.optionsProviderService.getDfOptions(configValue.options);
}
return of([]);
}
onBlur(event: FocusEvent) {
const radioGroupHasFocus = this.el.nativeElement.contains(event.relatedTarget);
if (radioGroupHasFocus) {
return;
}
this.emitFormEvent('onBlurEvent', this.control().value);
}
}
<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>
<nx-label
*ngIf="config().label"
[size]="this.isRetailChannel() ? 'large' : 'small'"
[ngClass]="{
'nx-font-weight-regular': isRetailChannel()
}"
>{{ config().label | interpolateFromStore | async
}}<df-info-icon
*ngIf="config().infoIcon"
nxFormfieldAppendix
[config]="config().infoIcon"
></df-info-icon>
</nx-label>
<nx-radio-group
[formControl]="control()"
[id]="config().id"
[name]="config().id"
[attr.data-testid]="config().testId"
[ngClass]="{
'radio-group-horizontal': config().horizontalLayout
}"
(focusout)="onBlur($event)"
>
<ng-container *ngFor="let option of radioOptions$ | async">
<nx-radio
[labelSize]="this.isRetailChannel() ? 'big' : 'small'"
[value]="option.value"
#thisInput
[attr.data-testid]="option?.testId"
><span>{{ option.label | interpolateFromStore | async }}</span>
</nx-radio>
</ng-container>
<taly-validation-errors
ngProjectAs="nx-error"
nxFormfieldError
[errorMessages]="validationConfigs()"
[controlErrors]="control().errors"
>
</taly-validation-errors>
</nx-radio-group>
<nx-message *ngIf="config().note && !(control().touched && control().invalid)" 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;
}
.radio-group-horizontal {
@media (min-width: $breakpoint-m) {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}