Skip to content

Signal froms: Custom form schema metadata behaviour #67769

@HerrDerb

Description

@HerrDerb

Which @angular/* package(s) are relevant/related to the feature request?

forms

Description

I like how the configuration of validators for a signal form field works with the declarative approach by adding to a fields metadata.
In fact, I would like this for my own purpose.

I am currently implementing a "queryParameterSync" metadata definition for a form field. e,g, querySync(schemaPath.search, stringQuerySerializer.primitive)
Which will define that this field should be synced with url query parameters. This is useful for filter forms to have a shareable link.

export const QUERY_PARAM_SYNC_SERIALIZER =
  createMetadataKey<[BaseQueryParamSerializer, string | undefined]>();

export function querySync<TValue, TPathKind extends PathKind = PathKind.Root>(
  path: SchemaPath<TValue, SchemaPathRules.Supported, TPathKind>,
  serializer: BaseQueryParamSerializer,
  queryParamName?: string,
): void {
  metadata(path, QUERY_PARAM_SYNC_SERIALIZER, () => [
    serializer,
    queryParamName,
  ]);
}

Defining my own function that adds the metadata to the form field (querySync) is no problem. Also I have it working from end to end.
The only thing that bothers me is one extra step you currently have to take when using a custom form field metadata to add behavior to it. You have to make a separate call to look for fields having a certain metadata key and act on them.

// register call
const myForm = form(model, (schemaPath) => {
        required(schemaPath.search);
        querySync(schemaPath.includeArchived, booleanQuerySerializer.primitive);
        querySync(schemaPath.search, stringQuerySerializer.primitive);
 });
this.queryParamSyncEnablerService.register(myForm)

While this works, it feels just no clean/right.

Proposed solution

What would be really nice, is if you could inject a metadata behavior to the original angular form function.

 {
      provide: SIGNAL_FORMS_CUSTOM_METADATA_BEHAVIOUR,
      useValue: {
             metadataKey: MY_METADATA_KEY
              behaviour: field => registerForQuerySync(field)
     } as SignalFormCustomMetadataBehaviour
}

A capability sketched around this would enable dynamic form enhancement and provide significant customization flexibility for signal forms.

Alternatives considered

Wrapping the current from method or "register" the form in an additional step

Metadata

Metadata

Assignees

Type

No type

Projects

Status

No status

Relationships

None yet

Development

No branches or pull requests

Issue actions