Generators

Creating and registering a new control, group or block and be cumbersome. To make this easier, ngx-formbar comes with three generator schematics.

Options

All three schematics (control, group, block) support the same options:

Option	Type	Required	Default (control/group/block)	Description
—key	string	Yes	—	Registration key used in the Formbar configuration.
—name	string	No	key	Base name for component and interface.
—project	string	No	workspace default project	Angular project name where files are generated.
—path	string	No	current working directory	Path to where the generated files will be placed.
—interfaceSuffix	string	No	Control / Group / Block	Suffix appended to the interface name.
—componentSuffix	string	No	Control / Group / Block	Suffix appended to the component class name.
—hostDirectiveHelperPath	string	No	-	Path to the the hostDirective helper, relative to the project root. If the file cannot be found or the option was not provided, it will fallback to using the verbose syntax.
—viewProviderHelperPath	string	No	-	Path to the the viewProvider helper, relative to the project root. If the file cannot be found or the option was not provided, it will fallback to using the verbose syntax.
—schematicsConfig	string	No	-	Path of the schematics configuration, relative to the project root, that is to be used by this schematic. If this parameter is left out, the schematic will try to resolve the file from its default location. Configuration set in this file will override all duplicate options passed to the CLI.
—skipRegistration	boolean	No	false	Skip automatic registration. You will have to register the component yourself or run the Register Scheamtic

Notes for Path Options

The paths for hostDirectiveHelperPath and viewProviderHelperPath can have three different shapes, that all resolve differently.

These are the relevant default values:

• Host Directive Helper File Name: (type).host-directive.ts
• Host Directive Identifier: ngxfb(Type)HostDirective
• View Provider Helper File Name: view-provider.ts
• View Provider Identifier: viewProviders

Folder

Shape: path/to/helper/folder

This will resolve to the folder path and assumes the helper files are set up with the default names and identifiers.

If an index.ts exists, it will use this for the import. Otherwise, it falls back to importing from the helper file directly.

Folder and File

Shape: path/to/helper/folder/file-name.ts

This will resolve to the file path and assumes the helper files are set up with the default identifier.

If an index.ts exists, it will use this for the import. Otherwise, it falls back to importing from the helper file directly.

Folder, File and Identifier

Shape: path/to/helper/folder/file-name.ts#customIdentifier

This will resolve to the file path and use the identifier as is. Make sure the spelling matches exactly that of the exported name

If an index.ts exists, it will use this for the import. Otherwise, it falls back to importing from the helper file directly.

Examples

Generating a Control

Run:

ng generate @ngx-formbar/core:control --key <control-key> [--name <ComponentName>] [--project <project>] [--path <path>] [--interface-suffix <suffix>] [--component-suffix <suffix>]

This will:

• Scaffold an interface <name><interfaceSuffix>.ts extending NgxFbControl.
• Generate component files (<name><componentSuffix>.component.ts, .html, .scss, .spec.ts) wired with NgxfbControlDirective.
• Register the new control in your Formbar configuration under componentRegistrations with the given key.

For implementation details and advanced usage, see the Controls Guide.

Generating a Group

Run:

ng generate @ngx-formbar/core:group --key <group-key> [--name <ComponentName>] [--project <project>] [--path <path>] [--interface-suffix <suffix>] [--component-suffix <suffix>]

This will:

• Scaffold an interface <name><interfaceSuffix>.ts extending NgxFbFormGroup.
• Generate component files (<name><componentSuffix>.component.ts, .html, .scss, .spec.ts) wired with NgxfbGroupDirective.
• Register the new group in your Formbar configuration under componentRegistrations with the given key.

For implementation details and advanced usage, see the Groups Guide.

Generating a Block

Run:

ng generate @ngx-formbar/core:block --key <block-key> [--name <ComponentName>] [--project <project>] [--path <path>] [--interface-suffix <suffix>] [--component-suffix <suffix>]

This will:

• Scaffold an interface <name><interfaceSuffix>.ts extending NgxFbBlock.
• Generate component files (<name><componentSuffix>.component.ts, .html, .scss, .spec.ts) wired with NgxfbBlockDirective.
• Register the new block in your Formbar configuration under componentRegistrations with the given key.

For implementation details and advanced usage, see the Blocks Guide.

Setting Options

There are two ways to set custom default options. This helps repeating the same parameters on every CLi command.

In formbar.config.json

All options are optional, but are listed here in full. You can put any combination of them.

formbar.config.json

{
  "controlRegistrationsPath": "app/form/registrations.ts",
  "viewProviderHelperPath": "app/shared/helper/control-container.view-provider.ts",
  "control": {
    "interfaceSuffix":"Type",
    "componentSuffix": "Input",
    "hostDirectiveHelperPath":"app/form/helper",
    "skipRegistration": true
  },
  "group": {
      "interfaceSuffix":"GroupType",
      "componentSuffix": "Group",
      "hostDirectiveHelperPath":"app/form/helper",
      "skipRegistration": true
  },
  "block": {
      "interfaceSuffix":"BlockType",
      "componentSuffix": "Block",
      "hostDirectiveHelperPath":"app/form/helper",
      "skipRegistration": true
  }
}

In angular.json

You can set default values for any ngx-formbar schematic option in your angular.json. Add a schematics section under your project with the schematic name and desired defaults.

All options are optional, but are listed here in full. You can put any combination of them. Note, that compared to formbar.config.json, you have to repeat all values.

angular.json

{
  "projects": {
    "my-app": {
      "schematics": {
        "@ngx-formbar/core:control": {
          "controlRegistrationsPath": "app/form/registrations.ts",
          "viewProviderHelperPath": "app/shared/helper/control-container.view-provider.ts",
          "interfaceSuffix":"Type",
          "componentSuffix": "Input",
          "hostDirectiveHelperPath":"app/form/helper",
          "skipRegistration": true
        },
        "@ngx-formbar/core:group": {
          "controlRegistrationsPath": "app/form/registrations.ts",
          "viewProviderHelperPath": "app/shared/helper/control-container.view-provider.ts",
          "interfaceSuffix":"GroupType",
          "componentSuffix": "Group",
          "hostDirectiveHelperPath":"app/form/helper",
          "skipRegistration": true
        },
        "@ngx-formbar/core:block": {
          "controlRegistrationsPath": "app/form/registrations.ts",
          "viewProviderHelperPath": "app/shared/helper/control-container.view-provider.ts",
          "interfaceSuffix":"BlockType",
          "componentSuffix": "Block",
          "hostDirectiveHelperPath":"app/form/helper",
          "skipRegistration": true
        }
      }
    }
  }
}

Resolving options

Due to the current implementation and how the default values are set, the options are resolved in the following cascading order.

1. Values from angular.json
2. CLI Options
3. Values from formbar.config.json

In other words: Values from formbar.config.json overwrite values from the CLI Options, which overwrite values from the angular.json.