Helper

To reduce the amount of boilerplate needed with each component and to improve maintainability, you can set up a few helper objects. This way, should anything change, you only need to update one file.

The exact naming of each helper really is up to you.

Control Container View Providers

ControlContainer is required for all controls and groups that will be used within ngx-formwork. Injection of the control container allows the components to use reactive forms functionality, without needing to pass the form group through inputs and wrapping the template into additional tags. See this YouTube Video for more detailed explanation: How to Make Forms in Angular REUSABLE (Advanced, 2023)

export const controlContainerViewProviders = [
  {
    provide: ControlContainer,
    useFactory: () => inject(ControlContainer, { skipSelf: true }),
  },
];

@Component({
  // Other component decorator options
  viewProviders: controlContainerViewProviders,
})

Control Host Directive

This is a convenience helper to apply the NgxfwControlDirective.

export const ngxfwControlHostDirective = {
  directive: NgxfwControlDirective,
  inputs: ['content'],
};

Use it like this:

@Component({
  // Other component decorator options
  hostDirectives: [
    // Apply here
    ngxfwControlHostDirective
  ],
})

Group Host Directive

This is a convenience helper to apply the NgxfwGroupDirective.

export const ngxfwGroupHostDirective = {
  directive: NgxfwGroupDirective,
  inputs: ['content'],
};

Use it like this:

@Component({
  // Other component decorator options
  hostDirectives: [
    // Apply here
    ngxfwGroupHostDirective
  ],
})

Helper Types

For better type safety, when writing a form configuration in TypeScript, ngx-formwork provides a helper type OneOf. With this you can construct a union type like this.

export type MyAppControls = OneOf<[TestTextControl, TestGroup]>;

and use it like this

export const exampleForm: MyAppControls[] = [ ... ]