File

projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts

Extends

DynamicFormControlComponent

Metadata

selector	`dynamic-material-datepicker`
templateUrl	`./dynamic-material-datepicker.component.html`

Index

Constructor

constructor(layoutService: DynamicFormLayoutService, validationService: DynamicFormValidationService, LABEL_OPTIONS: LabelOptions)

Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:32

Parameters :

Name	Type	Optional
layoutService	`DynamicFormLayoutService`	No
validationService	`DynamicFormValidationService`	No
LABEL_OPTIONS	`LabelOptions`	No

Inputs

formLayout
Type : `DynamicFormLayout`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:21

group
Type : `FormGroup`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:22

layout
Type : `DynamicFormControlLayout`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:23

model
Type : `DynamicDatePickerModel`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:24

Outputs

blur
Type : `EventEmitter<any>`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:26

change
Type : `EventEmitter<any>`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:27

customEvent
Type : `EventEmitter<DynamicFormControlCustomEvent>`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:28

focus
Type : `EventEmitter<any>`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:29

Methods

getClass

getClass(context: DynamicFormControlLayoutContext, place: DynamicFormControlLayoutPlace, model: DynamicFormControlModel)

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:73

Parameters :

Name	Type	Optional	Default value
context	`DynamicFormControlLayoutContext`	No
place	`DynamicFormControlLayoutPlace`	No
model	`DynamicFormControlModel`	No	`this.model`

Returns : string

onBlur

onBlur($event: any)

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:82

Parameters :

Name	Type	Optional
$event	`any`	No

Returns : void

onChange

onChange($event: any)

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:92

Parameters :

Name	Type	Optional
$event	`any`	No

Returns : void

onCustomEvent

onCustomEvent($event: any, type: string | null, bypass: boolean)

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:101

Parameters :

Name	Type	Optional	Default value
$event	`any`	No
type	`string \| null`	No	`null`
bypass	`boolean`	No	`false`

Returns : void

onFocus

onFocus($event: any)

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:113

Parameters :

Name	Type	Optional
$event	`any`	No

Returns : void

Properties

Public LABEL_OPTIONS

Type : LabelOptions

Decorators :


                                @Inject(MAT_LABEL_GLOBAL_OPTIONS)
@Optional()

Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:36

matDatePicker

Type : MatDatepicker<any>

Decorators :


                                @ViewChild('matDatepicker', {static: true})

Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:31

matInput

Type : MatInput

Decorators :


                                @ViewChild(MatInput, {static: true})

Defined in projects/ng-dynamic-forms/ui-material/src/lib/datepicker/dynamic-material-datepicker.component.ts:32

Private _hasFocus

Default value : false

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:21

blur

Type : EventEmitter<any>

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:29

change

Type : EventEmitter<any>

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:30

customEvent

Type : EventEmitter<DynamicFormControlCustomEvent>

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:31

focus

Type : EventEmitter<any>

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:32

formLayout

Type : DynamicFormLayout

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:23

group

Type : FormGroup

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:24

layout

Type : DynamicFormControlLayout

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:25

model

Type : DynamicFormControlModel

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:26

templates

Type : DynamicFormControlTemplates

Inherited from DynamicFormControlComponent

Defined in DynamicFormControlComponent:27

import { Component, EventEmitter, Inject, Input, Optional, Output, ViewChild } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { LabelOptions, MAT_LABEL_GLOBAL_OPTIONS } from "@angular/material/core";
import { MatDatepicker } from "@angular/material/datepicker";
import { MatInput } from "@angular/material/input";
import {
    DynamicDatePickerModel,
    DynamicFormControlComponent,
    DynamicFormControlCustomEvent, DynamicFormControlLayout,
    DynamicFormLayout,
    DynamicFormLayoutService,
    DynamicFormValidationService
} from "@ng-dynamic-forms/core";

@Component({
    selector: "dynamic-material-datepicker",
    templateUrl: "./dynamic-material-datepicker.component.html"
})
export class DynamicMaterialDatePickerComponent extends DynamicFormControlComponent {

    @Input() formLayout: DynamicFormLayout;
    @Input() group: FormGroup;
    @Input() layout: DynamicFormControlLayout;
    @Input() model: DynamicDatePickerModel;

    @Output() blur: EventEmitter<any> = new EventEmitter();
    @Output() change: EventEmitter<any> = new EventEmitter();
    @Output() customEvent: EventEmitter<DynamicFormControlCustomEvent> = new EventEmitter();
    @Output() focus: EventEmitter<any> = new EventEmitter();

    @ViewChild("matDatepicker", { static: true }) matDatePicker: MatDatepicker<any>;
    @ViewChild(MatInput, { static: true }) matInput: MatInput;

    constructor(protected layoutService: DynamicFormLayoutService,
                protected validationService: DynamicFormValidationService,
                @Inject(MAT_LABEL_GLOBAL_OPTIONS) @Optional() public LABEL_OPTIONS: LabelOptions) {

        super(layoutService, validationService);
    }
}

<mat-form-field [appearance]="model.getAdditional('appearance', 'legacy')"
                [color]="model.getAdditional('color', 'primary')"
                [floatLabel]="model.getAdditional('floatLabel', LABEL_OPTIONS && LABEL_OPTIONS['float'] || 'auto')"
                [formGroup]="group"
                [hideRequiredMarker]="model.getAdditional('hideRequiredMarker', false)"
                [ngClass]="getClass('grid', 'control')">

    <ng-container *ngIf="model.label" ngProjectAs="mat-label">

        <mat-label [innerHTML]="model.label"></mat-label>

    </ng-container>

    <span *ngIf="model.prefix" matPrefix [innerHTML]="model.prefix"></span>

    <input matInput
           [autofocus]="model.autoFocus"
           [formControlName]="model.id"
           [id]="id"
           [max]="model.max"
           [matDatepicker]="matDatepicker"
           [min]="model.min"
           [name]="model.name"
           [ngClass]="getClass('element', 'control')"
           [placeholder]="model.placeholder"
           [readonly]="model.readOnly"
           [required]="model.required"
           (blur)="onBlur($event)"
           (dateChange)="onChange($event)"
           (dateInput)="onCustomEvent($event, 'dateInput')"
           (focus)="onFocus($event)"/>

    <span *ngIf="model.suffix" matSuffix [innerHTML]="model.suffix"></span>

    <mat-hint *ngIf="model.hint !== null" align="start" [innerHTML]="model.hint"></mat-hint>


    <mat-datepicker-toggle matSuffix [for]="matDatepicker"></mat-datepicker-toggle>

    <mat-datepicker #matDatepicker
                    [opened]="model.getAdditional('opened', false)"
                    [startAt]="model.focusedDate"
                    [startView]="model.getAdditional('startView', 'month')"
                    [touchUi]="model.getAdditional('touchUi', false)"
                    (closed)="onCustomEvent($event, 'closed')"
                    (monthSelected)="onCustomEvent($event, 'monthSelected')"
                    (opened)="onCustomEvent($event, 'opened')"
                    (yearSelected)="onCustomEvent($event, 'yearSelected')"></mat-datepicker>

    <mat-error *ngFor="let message of errorMessages">{{ message }}</mat-error>

</mat-form-field>

Legend

Html element

Component

Html element with directive

File

Extends

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""