ndb-core documentation
  1. Components
  2. DynamicEditComponent

File

src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts

Extends

CustomFormControlDirective

Implements

EditComponent

Metadata

providers DynamicEditComponent
selector app-dynamic-edit
imports DynamicComponentDirective ReactiveFormsModule
templateUrl ./dynamic-edit.component.html
styleUrl ./dynamic-edit.component.scss

Index

Properties
Methods
Inputs
Outputs

Inputs

entity
Type : Entity
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:24
formFieldConfig
Type : FormFieldConfig
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:23
aria-describedby
Type : string
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:47
disabled
Type : boolean
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:79
ngControl
Type : any
Default value : inject(NgControl, { optional: true, self: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:40
placeholder
Type : string
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:48
required
Type : boolean
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:51
value
Type : T
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:90

Outputs

valueChange
Type : EventEmitter
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:100

Methods

blur
blur()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:125
Returns : void
focus
focus()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:120
Returns : void
onContainerClick
onContainerClick(event: MouseEvent)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:139
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:158
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:162
Parameters :
Name Type Optional
fn any No
Returns : void
setDescribedByIds
setDescribedByIds(ids: string[])
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:132
Parameters :
Name Type Optional
ids string[] No
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:166
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
writeValue
writeValue(value: T, notifyFormControl)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:147

Implementation for Angular ControlValueAccessor interface that links the form control value to the component value

Parameters :
Name Type Optional Default value Description
value T No

The new value to set
notifyFormControl No false

Whether to notify the FormControl of this change (for internal updates)
Returns : void

Properties

_disabled
Default value : false
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:88
_value
Type : T
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:98
controlType
Type : string
Default value : "custom-control"
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:66
elementRef
Default value : inject<ElementRef<HTMLElement>>(ElementRef)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:38
errorState
Default value : false
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:65
errorStateMatcher
Default value : inject(ErrorStateMatcher)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:39
focused
Default value : false
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:63
id
Default value : `custom-form-control-${CustomFormControlDirective.nextId++}`
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:45
Static nextId
Type : number
Default value : 0
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:44
onChange
Default value : () => {...}
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:67
onTouched
Default value : () => {...}
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:68
parentForm
Default value : inject(NgForm, { optional: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:41
parentFormGroup
Default value : inject(FormGroupDirective, { optional: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:42
stateChanges
Default value : new Subject<void>()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:62
touched
Default value : false
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:64 
import { FormFieldConfig } from "#src/app/core/common-components/entity-form/FormConfig";
import { DynamicComponentDirective } from "#src/app/core/config/dynamic-components/dynamic-component.directive";
import { Entity } from "#src/app/core/entity/model/entity";
import { Component, Input } from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { MatFormFieldControl } from "@angular/material/form-field";
import { CustomFormControlDirective } from "../../../common-components/basic-autocomplete/custom-form-control.directive";
import { EditComponent } from "./edit-component.interface";

@Component({
  selector: "app-dynamic-edit",
  imports: [DynamicComponentDirective, ReactiveFormsModule],
  templateUrl: "./dynamic-edit.component.html",
  styleUrl: "./dynamic-edit.component.scss",
  providers: [
    { provide: MatFormFieldControl, useExisting: DynamicEditComponent },
  ],
})
export class DynamicEditComponent
  extends CustomFormControlDirective<any>
  implements EditComponent
{
  @Input() formFieldConfig: FormFieldConfig;
  @Input() entity: Entity;
}

<ng-container
  [appDynamicComponent]="{
    component: formFieldConfig.editComponent,
    config: {
      ngControl: ngControl,
      formFieldConfig: formFieldConfig,
      entity: entity,
    },
  }"
>
</ng-container>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""