|
config
|
Type : C
|
|
Required : true
|
|
|
|
|
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.
|
|
isAclHandled
|
Type : boolean
|
Default value : false
|
|
|
|
|
Outputs
|
formEvent
|
Type : DfEventPayload
|
|
|
|
|
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.
|
Methods
|
onBlur
|
onBlur(event: FocusEvent)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
FocusEvent
|
No
|
|
|
Readonly
labelAM
|
Type : unknown
|
Default value : computed(() => {
const config = this.config();
return config.twelveHourFormat ? config.labelAM || 'AM' : 'AM';
})
|
|
|
|
Readonly
labelPM
|
Type : unknown
|
Default value : computed(() => {
const config = this.config();
return config.twelveHourFormat ? config.labelPM || 'PM' : 'PM';
})
|
|
|
|
Readonly
pickerEndTime
|
Type : unknown
|
Default value : computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerEndTime || '24:00' : '24:00';
})
|
|
|
|
Readonly
pickerStartTime
|
Type : unknown
|
Default value : computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerStartTime || '00:00' : '00:00';
})
|
|
|
|
Readonly
pickerTimeInterval
|
Type : unknown
|
Default value : computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerTimeInterval || 30 : 30;
})
|
|
|
|
Readonly
placeholderHours
|
Type : unknown
|
Default value : computed(() => this.config().placeholderHours || 'hh')
|
|
|
|
Readonly
placeholderMinutes
|
Type : unknown
|
Default value : computed(() => this.config().placeholderMinutes || 'mm')
|
|
|
|
componentOrControlInitFinished
|
Type : unknown
|
Default value : new ReplaySubject<AbstractControl | undefined>(1)
|
|
|
|
|
This ReplaySubject is provided to emit the control once it is initialized.
|
|
errorMessages
|
Type : WritableSignal<Observable[]>
|
Default value : signal([])
|
|
|
|
|
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')
|
|
|
|
|
import { NxMessageModule } from '@allianz/ng-aquila/message';
import { NxTimefieldComponent } from '@allianz/ng-aquila/timefield';
import {
DfBaseComponent,
DfBaseModule,
DfInfoIconComponent
} from '@allianz/taly-core/dynamic-form';
import { AsyncPipe } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
computed,
ElementRef,
inject,
input,
OnInit
} from '@angular/core';
import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
import { DfTimeConfig } from './time.model';
import { NxErrorComponent } from '@allianz/ng-aquila/base';
@Component({
selector: 'df-time',
templateUrl: './time.component.html',
styleUrls: ['./time.component.scss'],
imports: [
ReactiveFormsModule,
NxTimefieldComponent,
AsyncPipe,
DfBaseModule,
DfInfoIconComponent,
NxMessageModule,
NxErrorComponent
],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DfTimeComponent extends DfBaseComponent<DfTimeConfig> implements OnInit {
override control = input<UntypedFormControl>(new UntypedFormControl());
private el = inject(ElementRef);
readonly labelAM = computed(() => {
const config = this.config();
return config.twelveHourFormat ? config.labelAM || 'AM' : 'AM';
});
readonly labelPM = computed(() => {
const config = this.config();
return config.twelveHourFormat ? config.labelPM || 'PM' : 'PM';
});
readonly pickerStartTime = computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerStartTime || '00:00' : '00:00';
});
readonly pickerEndTime = computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerEndTime || '24:00' : '24:00';
});
readonly pickerTimeInterval = computed(() => {
const config = this.config();
return config.withTimepicker ? config.pickerTimeInterval || 30 : 30;
});
readonly placeholderHours = computed(() => this.config().placeholderHours || 'hh');
readonly placeholderMinutes = computed(() => this.config().placeholderMinutes || 'mm');
override ngOnInit(): void {
super.ngOnInit();
this.emitFormControlEventOnValueChanges();
}
onBlur(event: FocusEvent) {
const timeFieldHasFocus = this.el.nativeElement.contains(event.relatedTarget);
if (timeFieldHasFocus) {
return;
}
this.emitFormEvent('onBlurEvent', this.control().value);
}
}
<div class="df-time__container">
<nx-timefield
[id]="config().id"
[attr.data-testid]="config().testId"
[formControl]="control()"
[enableTimeValidation]="true"
[label]="(config().label | interpolateFromStore | async) || ''"
[optionalLabel]="(config().optionalLabel | interpolateFromStore | async) || ''"
[twelveHourFormat]="config().twelveHourFormat"
[labelAM]="labelAM()"
[labelPM]="labelPM()"
[withTimepicker]="config().withTimepicker"
[pickerStartTime]="pickerStartTime()"
[pickerEndTime]="pickerEndTime()"
[pickerTimeInterval]="pickerTimeInterval()"
[placeholderHours]="placeholderHours()"
[placeholderMinutes]="placeholderMinutes()"
[hint]="(config().hint | interpolateFromStore | async) || ''"
(focusout)="onBlur($event)"
>
@for (message$ of errorMessages(); track $index) {
<nx-error [appearance]="nxErrorAppearance">{{ message$ | async }}</nx-error>
}
</nx-timefield>
@if (config().infoIcon) {
<df-info-icon [config]="config().infoIcon"></df-info-icon>
}
</div>
@if (config().note && !(control().touched && control().invalid)) {
<nx-message context="info">
<span>{{ config().note | interpolateFromStore | async }}</span>
</nx-message>
}
:host {
display: block;
// nx-message renders outside nx-timefield's nx-formfield__wrapper
// so zero the inner formfield's default bottom padding
// and replace it with host padding instead.
&:has(nx-message) {
--formfield-bottom-padding: 0;
--formfield-outline-bottom-padding: 0;
padding-bottom: 16px;
}
}
.df-time__container {
display: flex;
flex-direction: row;
justify-content: start;
align-items: start;
gap: 8px;
}
df-info-icon {
// Used to compensate the icon top position with the timefield.
// 13px is derived from nx-icon height (24px / 2) + 1px visual adjustment.
position: relative;
top: calc(var(--formfield-label-height) + var(--formfield-control-height) / 2 - 13px);
}
:host:has(.has-outline) df-info-icon {
top: calc(
var(--formfield-outline-label-height) + var(--formfield-outline-control-height) / 2 - 13px
);
}
nx-message {
margin-top: 12px;
}
Legend
Html element with directive