src/app/features/public-form/edit-public-form-related-entities/edit-public-form-related-entities.component.ts
CustomFormControlDirective<string[]>
| changeDetection | ChangeDetectionStrategy.OnPush |
| providers |
EditPublicFormRelatedEntitiesComponent
|
| selector | app-edit-public-form-related-entities |
| standalone | true |
| imports |
MatSelectModule
MatOptionModule
MatButtonModule
FontAwesomeModule
MatTooltipModule
|
| styleUrls | ./edit-public-form-related-entities.component.scss |
| templateUrl | ./edit-public-form-related-entities.component.html |
No results matching.
ReactiveFormsModule
MatSelectModule
MatOptionModule
MatButtonModule
FontAwesomeModule
MatTooltipModule
CustomFormControlDirective<string[]>
EditComponent
Properties |
|
Methods |
Inputs |
Outputs |
Accessors |
| entity | |
Type : Entity
|
|
| 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
|
|
| clearSelectedEntities |
clearSelectedEntities()
|
|
Returns :
void
|
| onSelectionChange | ||||||
onSelectionChange(selectedIds: string[])
|
||||||
|
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 |
| selectedFieldIds |
getselectedFieldIds()
|
import { EditComponent } from "#src/app/core/entity/entity-field-edit/dynamic-edit/edit-component.interface";
import {
ChangeDetectionStrategy,
Component,
computed,
inject,
input,
} from "@angular/core";
import { ReactiveFormsModule } from "@angular/forms";
import { MatButtonModule } from "@angular/material/button";
import { MatOptionModule } from "@angular/material/core";
import { MatFormFieldControl } from "@angular/material/form-field";
import { MatSelectModule } from "@angular/material/select";
import { MatTooltipModule } from "@angular/material/tooltip";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { EntityDatatype } from "app/core/basic-datatypes/entity/entity.datatype";
import { CustomFormControlDirective } from "app/core/common-components/basic-autocomplete/custom-form-control.directive";
import { FormFieldConfig } from "app/core/common-components/entity-form/FormConfig";
import { DynamicComponent } from "app/core/config/dynamic-components/dynamic-component.decorator";
import { EntityRegistry } from "app/core/entity/database-entity.decorator";
import { Entity, EntityConstructor } from "app/core/entity/model/entity";
@DynamicComponent("EditPublicFormRelatedEntitiesComponent")
@Component({
selector: "app-edit-public-form-related-entities",
imports: [
ReactiveFormsModule,
MatSelectModule,
MatOptionModule,
MatButtonModule,
FontAwesomeModule,
MatTooltipModule,
],
templateUrl: "./edit-public-form-related-entities.component.html",
styleUrls: ["./edit-public-form-related-entities.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: MatFormFieldControl,
useExisting: EditPublicFormRelatedEntitiesComponent,
},
],
})
export class EditPublicFormRelatedEntitiesComponent
extends CustomFormControlDirective<string[]>
implements EditComponent
{
formFieldConfig = input<FormFieldConfig>();
entity = input<Entity>();
private entities = inject(EntityRegistry);
get selectedFieldIds(): string[] {
return this.formControl.value || [];
}
readonly relatedRefFields = computed<FormFieldConfig[]>(() => {
const entity = this.entity();
if (!entity?.["entity"]) return [];
const entityConstructor = this.entities.get(entity["entity"]);
if (!entityConstructor) return [];
return Array.from(entityConstructor.schema.entries())
.filter(([_, schema]) => schema.dataType === EntityDatatype.dataType)
.map(([id, schema]) => ({
id,
label: schema.label,
additional: schema.additional,
}));
});
onSelectionChange(selectedIds: string[]): void {
this.formControl.patchValue(selectedIds);
this.formControl.markAsDirty();
}
clearSelectedEntities() {
this.formControl.setValue([]);
this.formControl.markAsDirty();
}
}
<div class="flex-row align-center gap-small">
<mat-select
[value]="selectedFieldIds"
(selectionChange)="onSelectionChange($event.value)"
[disabled]="!enabled()"
multiple
class="flex-grow"
>
@for (field of relatedRefFields(); track field.id) {
<mat-option [value]="field.id">
{{ field.label || field.additional }}
</mat-option>
} @empty {
<mat-option disabled i18n>
This record type does not have any fields that link to another record.
</mat-option>
}
</mat-select>
<button
mat-icon-button
[disabled]="!enabled()"
(click)="clearSelectedEntities()"
matTooltip="Clear selected entities"
i18n-matTooltip
>
<fa-icon icon="times"></fa-icon>
</button>
</div>
./edit-public-form-related-entities.component.scss