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

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

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

entity
Type : Entity
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:27
formFieldConfig
Type : FormFieldConfig
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:26
aria-describedby
Type : string
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:98
disabled
Type : boolean
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:155
ngControl
Type : any
Default value : inject(NgControl, { optional: true, self: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:91
placeholder
Type : string
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:99
required
Type : boolean
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:102
value
Type : T
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:164

Outputs

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

Methods

blur
blur()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:201
Returns : void
focus
focus()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:196
Returns : void
onContainerClick
onContainerClick(event: MouseEvent)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:218
Parameters :
Name Type Optional
event MouseEvent No
Returns : void
registerOnChange
registerOnChange(fn: any)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:237
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:241
Parameters :
Name Type Optional
fn any No
Returns : void
setDescribedByIds
setDescribedByIds(ids: string[])
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:211
Parameters :
Name Type Optional
ids string[] No
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:245
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
writeValue
writeValue(value: T, notifyFormControl: unknown)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:226

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 unknown No false

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

Properties

controlType
Type : string
Default value : "custom-control"
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:114
elementRef
Type : unknown
Default value : inject<ElementRef<HTMLElement>>(ElementRef)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:87
Readonly enabled
Type : Signal<boolean>
Default value : computed(() => !this._disabled())
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:80

Whether the control is currently enabled, as a signal (tracks disabled).
errorStateMatcher
Type : unknown
Default value : inject(ErrorStateMatcher)
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:88
id
Type : unknown
Default value : `custom-form-control-${CustomFormControlDirective.nextId++}`
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:96
Static nextId
Type : number
Default value : 0
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:95
onChange
Type : unknown
Default value : () => {...}
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:115
onTouched
Type : unknown
Default value : () => {...}
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:116
parentForm
Type : unknown
Default value : inject(NgForm, { optional: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:92
parentFormGroup
Type : unknown
Default value : inject(FormGroupDirective, { optional: true })
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:93
stateChanges
Type : unknown
Default value : new Subject<void>()
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:113
Readonly valueSignal
Type : Signal<T>
Default value : computed(() => this._value())
Inherited from CustomFormControlDirective
Defined in CustomFormControlDirective:77

The current value of the control as a signal. Authoritative in both modes: it reflects the bound FormControl (synced in ngDoCheck) as well as [(value)] / writeValue updates.

Accessors

disabled
getdisabled()
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:29
setdisabled(value: boolean)
Defined in src/app/core/entity/entity-field-edit/dynamic-edit/dynamic-edit.component.ts:44
Parameters :
Name Type Optional
value boolean No
Returns : void 
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, ChangeDetectionStrategy, 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({
  changeDetection: ChangeDetectionStrategy.OnPush,
  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
{
  private static readonly TODO_COMPLETION_EDIT_COMPONENT = "EditTodoCompletion";

  formFieldConfig = input<FormFieldConfig>();
  entity = input<Entity>();

  override get disabled(): boolean {
    const control = this.ngControl?.control;

    if (
      this.formFieldConfig()?.editComponent ===
        DynamicEditComponent.TODO_COMPLETION_EDIT_COMPONENT &&
      control?.disabled &&
      !control.value
    ) {
      return false;
    }

    return super.disabled;
  }

  override set disabled(value: boolean) {
    super.disabled = value;
  }
}

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