src/app/core/basic-datatypes/date/edit-date-format/edit-date-format.component.ts
Edit component for date format configuration. Provides predefined format options and allows custom format strings.
CustomFormControlDirective<string>
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
EditDateFormatComponent
|
| selector | app-edit-date-format |
| standalone | true |
| imports | |
| templateUrl | ./edit-date-format.component.html |
No results matching.
Properties |
|
Methods |
Inputs |
Outputs |
| formFieldConfig | |
Type : FormFieldConfig
|
|
| aria-describedby | |
Type : string
|
|
|
Inherited from
CustomFormControlDirective
|
|
| disabled | |
Type : boolean
|
|
|
Inherited from
CustomFormControlDirective
|
|
| ngControl | |
Type : any
|
|
Default value : inject(NgControl, { optional: true, self: true })
|
|
|
Inherited from
CustomFormControlDirective
|
|
| placeholder | |
Type : string
|
|
|
Inherited from
CustomFormControlDirective
|
|
| required | |
Type : boolean
|
|
|
Inherited from
CustomFormControlDirective
|
|
| value | |
Type : T
|
|
|
Inherited from
CustomFormControlDirective
|
|
| valueChange | |
Type : EventEmitter
|
|
|
Inherited from
CustomFormControlDirective
|
|
| blur |
blur()
|
|
Inherited from
CustomFormControlDirective
|
|
Returns :
void
|
| focus |
focus()
|
|
Inherited from
CustomFormControlDirective
|
|
Returns :
void
|
| onContainerClick | ||||||
onContainerClick(event: MouseEvent)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| setDescribedByIds | ||||||
setDescribedByIds(ids: string[])
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Inherited from
CustomFormControlDirective
|
||||||
|
Parameters :
Returns :
void
|
| writeValue | |||||||||||||||
writeValue(value: T, notifyFormControl: unknown)
|
|||||||||||||||
|
Inherited from
CustomFormControlDirective
|
|||||||||||||||
|
Implementation for Angular ControlValueAccessor interface that links the form control value to the component value
Parameters :
Returns :
void
|
| createCustomFormat |
Type : unknown
|
Default value : () => {...}
|
| formatOptionToString |
Type : unknown
|
Default value : () => {...}
|
| Readonly predefinedFormats |
Type : string[]
|
Default value : [
"dd.MM.yyyy",
"MM/dd/yyyy",
"yyyy-MM-dd",
"dd/MM/yyyy",
"MMM d, yyyy",
]
|
| controlType |
Type : string
|
Default value : "custom-control"
|
|
Inherited from
CustomFormControlDirective
|
| elementRef |
Type : unknown
|
Default value : inject<ElementRef<HTMLElement>>(ElementRef)
|
|
Inherited from
CustomFormControlDirective
|
| Readonly enabled |
Type : Signal<boolean>
|
Default value : computed(() => !this._disabled())
|
|
Inherited from
CustomFormControlDirective
|
|
Whether the control is currently enabled, as a signal (tracks disabled). |
| errorStateMatcher |
Type : unknown
|
Default value : inject(ErrorStateMatcher)
|
|
Inherited from
CustomFormControlDirective
|
| id |
Type : unknown
|
Default value : `custom-form-control-${CustomFormControlDirective.nextId++}`
|
|
Inherited from
CustomFormControlDirective
|
| Static nextId |
Type : number
|
Default value : 0
|
|
Inherited from
CustomFormControlDirective
|
| onChange |
Type : unknown
|
Default value : () => {...}
|
|
Inherited from
CustomFormControlDirective
|
| onTouched |
Type : unknown
|
Default value : () => {...}
|
|
Inherited from
CustomFormControlDirective
|
| parentForm |
Type : unknown
|
Default value : inject(NgForm, { optional: true })
|
|
Inherited from
CustomFormControlDirective
|
| parentFormGroup |
Type : unknown
|
Default value : inject(FormGroupDirective, { optional: true })
|
|
Inherited from
CustomFormControlDirective
|
| stateChanges |
Type : unknown
|
Default value : new Subject<void>()
|
|
Inherited from
CustomFormControlDirective
|
| Readonly valueSignal |
Type : Signal<T>
|
Default value : computed(() => this._value())
|
|
Inherited from
CustomFormControlDirective
|
|
The current value of the control as a signal.
Authoritative in both modes: it reflects the bound |
import {
ChangeDetectionStrategy,
Component,
computed,
inject,
input,
LOCALE_ID,
OnInit,
Signal,
signal,
WritableSignal,
} from "@angular/core";
import { DatePipe } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
import { MatFormFieldControl } from "@angular/material/form-field";
import { FormFieldConfig } from "../../../common-components/entity-form/FormConfig";
import { DynamicComponent } from "../../../config/dynamic-components/dynamic-component.decorator";
import { EditComponent } from "../../../entity/entity-field-edit/dynamic-edit/edit-component.interface";
import { CustomFormControlDirective } from "../../../common-components/basic-autocomplete/custom-form-control.directive";
import { BasicAutocompleteComponent } from "../../../common-components/basic-autocomplete/basic-autocomplete.component";
/**
* Edit component for date format configuration.
* Provides predefined format options and allows custom format strings.
*/
@DynamicComponent("EditDateFormat")
@Component({
selector: "app-edit-date-format",
templateUrl: "./edit-date-format.component.html",
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [BasicAutocompleteComponent, ReactiveFormsModule],
providers: [
{ provide: MatFormFieldControl, useExisting: EditDateFormatComponent },
],
})
export class EditDateFormatComponent
extends CustomFormControlDirective<string>
implements EditComponent, OnInit
{
formFieldConfig = input<FormFieldConfig>();
private readonly datePipe = new DatePipe(inject(LOCALE_ID));
// Fixed reference date to illustrate each format: January 22, 2026
private readonly exampleDate = new Date(2026, 0, 22);
readonly predefinedFormats: string[] = [
"dd.MM.yyyy",
"MM/dd/yyyy",
"yyyy-MM-dd",
"dd/MM/yyyy",
"MMM d, yyyy",
];
formatOptionToString = (format: string): string => {
try {
const example = this.datePipe.transform(this.exampleDate, format) ?? "";
// Angular DatePipe interprets unknown characters as tokens and never throws,
// so we verify the output actually contains the example year as a sanity check.
const exampleYear = this.datePipe.transform(this.exampleDate, "y");
return example?.includes(exampleYear)
? `${format} (${example})`
: format;
} catch {
return format;
}
};
private readonly currentValue: WritableSignal<string | null | undefined> =
signal(undefined);
ngOnInit() {
this.currentValue.set(this.formControl.value);
this.formControl.valueChanges.subscribe((value) => {
this.currentValue.set(value);
});
}
/**
* Get all format options including any custom format currently set
*/
formatOptions: Signal<string[]> = computed(() => {
const value = this.currentValue();
if (value && !this.predefinedFormats.includes(value)) {
return [...this.predefinedFormats, value];
}
return this.predefinedFormats;
});
createCustomFormat = async (input: string) => input.trim();
}
<app-basic-autocomplete
[formControl]="formControl"
[options]="formatOptions()"
[optionToString]="formatOptionToString"
[createOption]="createCustomFormat"
></app-basic-autocomplete>