File

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

Extends

DynamicMaterialFormInputControlComponent

Metadata

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

Index

Constructor

constructor(layoutService: DynamicFormLayoutService, validationService: DynamicFormValidationService, errorStateMatcher: ErrorStateMatcher, AUTOCOMPLETE_OPTIONS: MatAutocompleteDefaultOptions, LABEL_OPTIONS: LabelOptions, RIPPLE_OPTIONS: RippleGlobalOptions)

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

Parameters :

Name	Type	Optional
layoutService	`DynamicFormLayoutService`	No
validationService	`DynamicFormValidationService`	No
errorStateMatcher	`ErrorStateMatcher`	No
AUTOCOMPLETE_OPTIONS	`MatAutocompleteDefaultOptions`	No
LABEL_OPTIONS	`LabelOptions`	No
RIPPLE_OPTIONS	`RippleGlobalOptions`	No

Inputs

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

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

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

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

Outputs

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

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

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

focus
Type : `EventEmitter<any>`
Defined in projects/ng-dynamic-forms/ui-material/src/lib/input/dynamic-material-input.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 AUTOCOMPLETE_OPTIONS

Type : MatAutocompleteDefaultOptions

Decorators :


                                @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS)

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

Public errorStateMatcher

Type : ErrorStateMatcher

Decorators :


                                @Inject(ErrorStateMatcher)

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

Public LABEL_OPTIONS

Type : LabelOptions

Decorators :


                                @Inject(MAT_LABEL_GLOBAL_OPTIONS)
@Optional()

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

matAutocomplete

Type : MatAutocomplete

Decorators :


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

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

matInput

Type : MatInput

Decorators :


                                @ViewChild(MatInput, {static: true})

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

Public RIPPLE_OPTIONS

Type : RippleGlobalOptions

Decorators :


                                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS)
@Optional()

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

matInput

Type : MatInput | undefined

Inherited from DynamicMaterialFormInputControlComponent

Defined in DynamicMaterialFormInputControlComponent:12

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 { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocomplete, MatAutocompleteDefaultOptions } from "@angular/material/autocomplete";
import { ErrorStateMatcher, LabelOptions, MAT_LABEL_GLOBAL_OPTIONS, MAT_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions } from "@angular/material/core";
import { MatInput } from "@angular/material/input";
import {
    DynamicFormControlCustomEvent, DynamicFormControlLayout,
    DynamicFormLayout,
    DynamicFormLayoutService,
    DynamicFormValidationService,
    DynamicInputModel
} from "@ng-dynamic-forms/core";
import { DynamicMaterialFormInputControlComponent } from "../dynamic-material-form-input-control.component";

@Component({
    selector: "dynamic-material-input",
    templateUrl: "./dynamic-material-input.component.html"
})
export class DynamicMaterialInputComponent extends DynamicMaterialFormInputControlComponent {

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

    @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("matAutocomplete", { static: true }) matAutocomplete: MatAutocomplete;
    @ViewChild(MatInput, { static: true }) matInput: MatInput;

    constructor(protected layoutService: DynamicFormLayoutService,
                protected validationService: DynamicFormValidationService,
                @Inject(ErrorStateMatcher) public errorStateMatcher: ErrorStateMatcher,
                @Inject(MAT_AUTOCOMPLETE_DEFAULT_OPTIONS) public AUTOCOMPLETE_OPTIONS: MatAutocompleteDefaultOptions,
                @Inject(MAT_LABEL_GLOBAL_OPTIONS) @Optional() public LABEL_OPTIONS: LabelOptions,
                @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) @Optional() public RIPPLE_OPTIONS: RippleGlobalOptions) {

        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')"
                [textMask]="{mask: (model.mask || false), showMask: model.mask && !(model.placeholder)}">

    <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
           [attr.accept]="model.accept"
           [attr.max]="model.max"
           [attr.min]="model.min"
           [attr.multiple]="model.multiple"
           [attr.step]="model.step"
           [autocomplete]="model.autoComplete"
           [autofocus]="model.autoFocus"
           [errorStateMatcher]="model.getAdditional('errorStateMatcher', errorStateMatcher)"
           [formControlName]="model.id"
           [id]="id"
           [maxlength]="model.maxLength"
           [matAutocomplete]="matAutocomplete"
           [minlength]="model.minLength"
           [name]="model.name"
           [ngClass]="getClass('element', 'control')"
           [pattern]="model.pattern"
           [placeholder]="model.placeholder"
           [readonly]="model.readOnly"
           [required]="model.required"
           [spellcheck]="model.spellCheck"
           [tabindex]="model.tabIndex"
           [type]="model.inputType"
           (blur)="onBlur($event)"
           (change)="onChange($event)"
           (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-hint *ngIf="showCharacterHint" align="end">{{ characterHint }}</mat-hint>

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

</mat-form-field>

<mat-autocomplete #matAutocomplete="matAutocomplete"
                  [autoActiveFirstOption]="model.getAdditional('autoActiveFirstOption', AUTOCOMPLETE_OPTIONS['autoActiveFirstOption'])"
                  [disableRipple]="model.getAdditional('disableRipple', RIPPLE_OPTIONS && RIPPLE_OPTIONS['disabled'] || false)"
                  [displayWith]="model.getAdditional('displayWith', null)"
                  (optionSelected)="onChange($event)">

    <mat-option *ngFor="let option of model.list$ | async" [value]="option">{{ option }}</mat-option>

</mat-autocomplete>

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 ""