src/app/core/basic-datatypes/month/edit-month/edit-month.component.ts
CustomFormControlDirective<Date>
| changeDetection | ChangeDetectionStrategy.OnPush |
| encapsulation | ViewEncapsulation.None |
| providers |
MY_FORMATS
MomentDateAdapter
EditMonthComponent
|
| selector | app-edit-month |
| standalone | true |
| imports |
MatInputModule
MatDatepickerModule
FontAwesomeModule
|
| styleUrls | ./edit-month.component.scss, |
| templateUrl | ./edit-month.component.html |
MatInputModule
MatDatepickerModule
ReactiveFormsModule
FontAwesomeModule
MY_FORMATS
MomentDateAdapter
CustomFormControlDirective<Date>
EditComponent
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
|
|
| setMonthAndYear | |||||||||
setMonthAndYear(date: Moment, datepicker: MatDatepicker
|
|||||||||
|
Parameters :
Returns :
void
|
| 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
|
| 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,
input,
ViewEncapsulation,
} from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import {
MAT_MOMENT_DATE_ADAPTER_OPTIONS,
MomentDateAdapter,
} from "@angular/material-moment-adapter";
import {
DateAdapter,
MAT_DATE_FORMATS,
MAT_DATE_LOCALE,
} from "@angular/material/core";
import {
MatDatepicker,
MatDatepickerModule,
} from "@angular/material/datepicker";
import { MatFormFieldControl } from "@angular/material/form-field";
import { MatInputModule } from "@angular/material/input";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { Moment } from "moment";
import { CustomFormControlDirective } from "../../../common-components/basic-autocomplete/custom-form-control.directive";
import { FormFieldConfig } from "../../../common-components/entity-form/FormConfig";
import { EditComponent } from "../../../entity/entity-field-edit/dynamic-edit/edit-component.interface";
export const MY_FORMATS = {
parse: {
dateInput: "YYYY-MM",
},
display: {
dateInput: "YYYY-MM",
monthYearLabel: "YYYY MMM",
dateA11yLabel: "LL",
monthYearA11yLabel: "YYYY MMMM",
},
};
@Component({
selector: "app-edit-month",
imports: [
MatInputModule,
MatDatepickerModule,
ReactiveFormsModule,
FontAwesomeModule,
],
templateUrl: "./edit-month.component.html",
styleUrls: [
"./edit-month.component.scss",
"../../../entity/entity-field-edit/dynamic-edit/dynamic-edit.component.scss",
],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{ provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
{
provide: DateAdapter,
useClass: MomentDateAdapter,
deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
},
{ provide: MatFormFieldControl, useExisting: EditMonthComponent },
],
encapsulation: ViewEncapsulation.None,
})
export class EditMonthComponent
extends CustomFormControlDirective<Date>
implements EditComponent
{
formFieldConfig = input<FormFieldConfig>();
setMonthAndYear(date: Moment, datepicker: MatDatepicker<Moment>) {
this.formControl.markAsDirty();
this.formControl.setValue(date.toDate());
datepicker.close();
}
}
<div class="flex-row">
<input
matInput
[formControl]="formControl"
[matDatepicker]="datepickerComp"
/>
<mat-datepicker-toggle
[for]="datepickerComp"
class="input-action-button"
></mat-datepicker-toggle>
<mat-datepicker
#datepickerComp
startView="multi-year"
(monthSelected)="setMonthAndYear($event, datepickerComp)"
panelClass="month-picker"
></mat-datepicker>
</div>
./edit-month.component.scss
.month-picker .mat-calendar-period-button {
pointer-events: none;
}
.month-picker .mat-calendar-arrow {
display: none;
}
../../../entity/entity-field-edit/dynamic-edit/dynamic-edit.component.scss
.input-action-button {
margin: -12px;
}