### Start ajsf Development Environment

Source: https://github.com/hamzahamidi/ajsf/blob/main/CONTRIBUTING.md

Provides instructions for setting up and running the ajsf development environment, including installing dependencies, starting the demo application, and concurrently building the library and demo in watch mode for active development.

```bash
$ cd ajsf
$ yarn install or npm install
$ yarn start
$ ng build @ajsf/core --watch
$ ng serve
```

--------------------------------

### Install Angular JSON Schema Form from GitHub

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Instructions to clone the Angular JSON Schema Form repository and set up the example playground using Git and Yarn. This sequence of commands will download the project, install dependencies, and start a local development server.

```shell
git clone https://github.com/hamzahamidi/ajsf.git ajsf
cd ajsf
yarn install
yarn start
```

--------------------------------

### Install @ajsf/bootstrap3 with npm

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Command to install the @ajsf/bootstrap3 package using npm, fetching the latest version.

```shell
npm install @ajsf/bootstrap3@latest
```

--------------------------------

### Install @ajsf/bootstrap3 with Yarn

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Command to install the @ajsf/bootstrap3 package using Yarn, fetching the latest version.

```shell
yarn add @ajsf/bootstrap3@latest
```

--------------------------------

### Install AJSF Material package with Yarn

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Instructions to install the @ajsf/material package using yarn. This package provides Material Design UI components for AJSF, offering an alternative installation method for developers who prefer Yarn.

```shell
yarn add @ajsf/material@latest
```

--------------------------------

### Install @ajsf/bootstrap4 Library via npm or Yarn

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

These commands demonstrate how to install the @ajsf/bootstrap4 library using either npm or Yarn package managers. This is the initial step required to integrate the library into your Angular project for JSON Schema form capabilities.

```shell
npm install @ajsf/bootstrap4@latest
```

```shell
yarn add @ajsf/bootstrap4@latest
```

--------------------------------

### Install @ajsf/material Library

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Installs the latest version of the @ajsf/material library, which provides Material Design integration for Angular JSON Schema Forms. This command adds the package to your project's dependencies using either npm or Yarn.

```shell
npm install @ajsf/material@latest
```

```shell
yarn add @ajsf/material@latest
```

--------------------------------

### Install AJSF Material package with NPM

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Instructions to install the @ajsf/material package using npm. This package provides Material Design UI components for AJSF, allowing developers to integrate it into their Angular projects.

```shell
npm install @ajsf/material@latest
```

--------------------------------

### Example Commit Message for Bug Fix with Body

Source: https://github.com/hamzahamidi/ajsf/blob/main/CONTRIBUTING.md

Provides an example of a commit message for a bug fix, showcasing the 'fix' type and including a detailed body to explain the issue and its resolution, following Angular Conventional Commit guidelines.

```markdown
fix(release): need to depend on latest rxjs and zone.js

The version in our package.json gets copied to the one we publish, and users need the latest of these.
```

--------------------------------

### Example Commit Message for Documentation Changes

Source: https://github.com/hamzahamidi/ajsf/blob/main/CONTRIBUTING.md

Illustrates a commit message for documentation-only changes, demonstrating the 'docs' type and a concise subject line as per Angular Conventional Commit standards.

```markdown
docs(changelog): update changelog to beta.5
```

--------------------------------

### Activating Debugging and External Asset Loading in Angular JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Example demonstrating the use of `debug` and `loadExternalAssets` inputs to activate debugging mode and automatically load external JavaScript/CSS from a CDN. It also shows how to capture the final `formSchema` and `formLayout` outputs for inspection.

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [debug]="true"
  loadExternalAssets="true"
  (formSchema)="showFormSchemaFn($event)"
  (formLayout)="showFormLayoutFn($event)">
</json-schema-form>
```

--------------------------------

### Define Valid Commit Message Types for Conventional Commits

Source: https://github.com/hamzahamidi/ajsf/blob/main/CONTRIBUTING.md

Lists and describes the predefined types allowed in the header of commit messages, such as 'build', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'style', and 'test', along with their respective purposes and example scopes.

```APIDOC
build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
ci: Changes to our CI configuration files and scripts (example scopes: Circle, BrowserStack, SauceLabs)
docs: Documentation only changes
feat: A new feature
fix: A bug fix
perf: A code change that improves performance
refactor: A code change that neither fixes a bug nor adds a feature
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
test: Adding missing tests or correcting existing tests
```

--------------------------------

### Import Material Design Framework Module in Angular

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Example of how to import the MaterialDesignFrameworkModule into an Angular application's main module (AppModule). This step is crucial for enabling the use of Material Design components with AJSF within your Angular project.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialDesignFrameworkModule } from '@ajsf/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    MaterialDesignFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

--------------------------------

### Define Example JSON Object for Data-Only Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Provides an example JavaScript object structure that can be used with the data-only mode of Angular JSON Schema Form. This object demonstrates various data types including strings, numbers, booleans, nested objects, and arrays, which the form component will interpret to generate a basic schema.

```javascript
exampleJsonObject = {
  "first_name": "Jane", "last_name": "Doe", "age": 25, "is_company": false,
  "address": {
    "street_1": "123 Main St.", "street_2": null,
    "city": "Las Vegas", "state": "NV", "zip_code": "89123"
  },
  "phone_numbers": [
    { "number": "702-123-4567", "type": "cell" },
    { "number": "702-987-6543", "type": "work" }
  ], "notes": ""
};
```

--------------------------------

### Setting Custom Validation Messages for Individual Form Controls

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Provides a JavaScript example of how to define custom validation error messages for a specific form control by adding a `validationMessages` object to its node within the form layout definition.

```javascript
const yourFormLayout = [
  { key: 'name',
    title: 'Enter your name',
    validationMessages: {
      // Put your error messages for the 'name' field here
    }
  },
  { type: 'submit', title: 'Submit' }
]
```

--------------------------------

### Define JSON Schema Validation Error Messages in JavaScript

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

This JavaScript object demonstrates how to define custom error messages for JSON Schema validation. It includes examples of plain string messages, string templates with variables, and a function that dynamically generates an error message based on the error object's properties.

```javascript
validationMessages: {

  // String error message
  required: 'This field is required.',

  // String template error message
  // - minimumLength variable will be replaced
  minLength: 'Must be at least {{minimumLength}} characters long.',

  // Function error message
  // - example error object:   { multipleOfValue: 0.01, currentValue: 3.456 }
  // - resulting error message: 'Must have 2 or fewer decimal places.'
  multipleOf: function(error) {
    if ((1 / error.multipleOfValue) % 10 === 0) {
      const decimals = Math.log10(1 / error.multipleOfValue);
      return `Must have ${decimals} or fewer decimal places.`;
    } else {
      return `Must be a multiple of ${error.multipleOfValue}.`;
    }
  }
}
```

--------------------------------

### Run unit tests for @ajsf/bootstrap3

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Command to execute unit tests for the @ajsf/bootstrap3 project via Karma, ensuring code quality and functionality.

```shell
ng test @ajsf/bootstrap3
```

--------------------------------

### Run Unit Tests for @ajsf/bootstrap4 Project

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

This command executes the unit tests defined for the `@ajsf/bootstrap4` project using Karma. Running tests is crucial for verifying the correctness and stability of the library's code after changes or during development.

```shell
ng test @ajsf/bootstrap4
```

--------------------------------

### Build @ajsf/material Project

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Builds the `@ajsf/material` project using the Angular CLI. The compiled output artifacts will be stored in the `dist/` directory, ready for deployment or publishing.

```shell
ng build @ajsf/material
```

--------------------------------

### Build @ajsf/bootstrap3 project

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Command to build the @ajsf/bootstrap3 project using Angular CLI. The compiled artifacts will be stored in the 'dist/' directory.

```shell
ng build @ajsf/bootstrap3
```

--------------------------------

### Build @ajsf/bootstrap4 Project with Angular CLI

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

This command uses the Angular CLI to compile and build the `@ajsf/bootstrap4` project. The resulting build artifacts, including compiled JavaScript and assets, will be stored in the `dist/` directory, ready for distribution or deployment.

```shell
ng build @ajsf/bootstrap4
```

--------------------------------

### Run Unit Tests for @ajsf/material

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Executes the unit tests for the `@ajsf/material` project using the Angular CLI and Karma test runner. This command helps verify the functionality and stability of the library's components.

```shell
ng test @ajsf/material
```

--------------------------------

### Generate Angular Artifacts for @ajsf/bootstrap4 Project

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

This command uses the Angular CLI to generate new components, directives, pipes, services, or other artifacts specifically within the `@ajsf/bootstrap4` project. It's important to use the `--project` flag to ensure the generated code is correctly associated with the library's project.

```shell
ng generate component component-name --project @ajsf/bootstrap4
```

--------------------------------

### json-schema-form Component Framework Options

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Defines the available values for the `framework` input property of the `json-schema-form` component. This property determines which UI framework is used to render the form, with options including Material Design, Bootstrap 3, Bootstrap 4, and plain HTML.

```APIDOC
framework: string
  Description: Specifies the UI framework to use for rendering the form.
  Possible Values:
    - material-design: For Material Design UI.
    - bootstrap-3: For Bootstrap 3 UI.
    - bootstrap-4: For Bootstrap 4 UI.
    - no-framework: For plain HTML (default value).
```

--------------------------------

### Generate Angular Components with ng generate

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Uses the Angular CLI `ng generate` command to create new components, directives, pipes, services, or other Angular artifacts within the `@ajsf/material` project. The `--project @ajsf/material` flag is crucial to ensure the generated files are added to the correct project.

```shell
ng generate component component-name --project @ajsf/material
ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/material
```

--------------------------------

### Set Framework Programmatically with FrameworkLibraryService

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Explains how to programmatically set a custom framework using the setFramework method of the FrameworkLibraryService. This method provides a dynamic way to switch or apply frameworks at runtime.

```javascript
import { FrameworkLibraryService } from '@ajsf/core';
...
constructor(private frameworkLibrary: FrameworkLibraryService) { }
...
frameworkLibrary.setFramework(yourCustomFramework);
```

--------------------------------

### Configure Frameworks via Input Property in JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to apply a custom framework to the JSON Schema Form by defining a framework object, which can include a custom component, widgets, stylesheets, and scripts, and then binding it to the [framework] input of the <json-schema-form> tag. This enables declarative framework customization.

```javascript
import { YourFrameworkComponent } from './your-framework.component';
import { YourWidgetComponent } from './your-widget.component';
...
const yourCustomFramework = {
  framework: YourFrameworkComponent,                                // required
  widgets:     { 'your-widget-name': YourWidgetComponent,   ... },  // optional
  stylesheets: [ '//url-to-framework-external-style-sheet', ... ],  // optional
  scripts:     [ '//url-to-framework-external-script',      ... ]   // optional
}
```

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [framework]="yourCustomFramework">
</json-schema-form>
```

--------------------------------

### Retrieve Loaded Framework Script URLs

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to use the `getFrameworkScritps()` method from `FrameworkLibraryService` to retrieve an array of URLs for JavaScript files automatically loaded by the currently set framework. This provides insight into the dynamically loaded scripts.

```JavaScript
getFrameworkScritps()
```

--------------------------------

### Generate Angular components with ng generate

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Command to generate a new Angular component within the @ajsf/bootstrap3 project using Angular CLI. This command can also be adapted to generate directives, pipes, services, classes, guards, interfaces, enums, or modules.

```shell
ng generate component component-name --project @ajsf/bootstrap3
```

--------------------------------

### Configure Framework Asset Loading via setFramework Method

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Demonstrates how to enable automatic loading of external assets by passing `true` as the second parameter to the `setFramework` method of Angular JSON Schema Form. This is typically used during development.

```JavaScript
setFramework('material-design', true)
```

--------------------------------

### Angular JSON Schema Form with Compound Input Object

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to use the pre-defined compound input object to configure the `json-schema-form` component via a single `[form]` attribute, streamlining form initialization.

```html
<json-schema-form
  [form]="yourCompoundInputObject"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
```

--------------------------------

### Enable External Asset Loading via HTML Tag Attribute

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Illustrates how to enable automatic loading of external assets by adding the `loadExternalAssets="true"` attribute directly to the `<json-schema-form>` HTML tag. This allows for declarative configuration in the template.

```HTML
loadExternalAssets="true"
```

--------------------------------

### Angular JSON Schema Form Component Reference

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Documentation for the <json-schema-form> Angular component, detailing its inputs, outputs, and configuration options for displaying forms based on JSON schemas or raw JSON data. It supports various UI frameworks and two-way data binding.

```APIDOC
<json-schema-form> Component:
  Inputs:
    [schema]: JSON schema object.
      Type: object
      Description: A valid JSON schema object that defines the structure and validation rules for the form.
    framework: string.
      Type: string
      Description: Specifies the UI framework to use for rendering the form.
      Possible Values: "material-design", "bootstrap-3", "bootstrap-4", "no-framework" (default).
    loadExternalAssets: boolean.
      Type: boolean
      Description: If true, automatically loads additional assets required by the display framework. Useful for testing, but production sites should load assets separately.
    [(ngModel)]: any.
      Type: any
      Description: Supports Angular's 2-way data binding. When used without a schema, the component automatically generates a simple schema from the bound JSON object.

  Outputs:
    (onSubmit): EventEmitter<any>.
      Type: function($event: any)
      Description: Emits the submitted JSON form data when the form is submitted.
    (formSchema): EventEmitter<any>.
      Type: any
      Description: (Available in 'Debugging inputs and outputs' section) Returns the generated schema when in data-only mode.
    (formLayout): EventEmitter<any>.
      Type: any
      Description: (Available in 'Debugging inputs and outputs' section) Returns the generated layout when in data-only mode.
```

--------------------------------

### Define Compound Input Object for JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Illustrates how to create a single JavaScript object that consolidates all form inputs (schema, layout, data, options, widgets, language, framework) for simplified configuration.

```javascript
const yourCompoundInputObject = {
  schema:    { ... },  // REQUIRED
  layout:    [ ... ],  // optional
  data:      { ... },  // optional
  options:   { ... },  // optional
  widgets:   { ... },  // optional
  language:   '...' ,  // optional
  framework:  '...'    // (or { ... }) optional
}
```

--------------------------------

### Retrieve Loaded Framework Stylesheet URLs

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to use the `getFrameworkStylesheets()` method from `FrameworkLibraryService` to retrieve an array of URLs for stylesheets automatically loaded by the currently set framework. This can be useful for debugging or inspection.

```JavaScript
getFrameworkStylesheets()
```

--------------------------------

### Angular JSON Schema Form with Separate Inputs

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Demonstrates configuring the `json-schema-form` component using individual attributes for schema, layout, data, options, widgets, language, framework, and event handlers. Includes two functionally equivalent HTML syntaxes for attribute binding.

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [layout]="yourJsonFormLayout"
  [(data)]="yourData"
  [options]="yourFormOptions"
  [widgets]="yourCustomWidgets"
  language="fr"
  framework="material-design"
  loadExternalAssets="true"
  (onChanges)="yourOnChangesFn($event)"
  (onSubmit)="yourOnSubmitFn($event)"
  (isValid)="yourIsValidFn($event)"
  (validationErrors)="yourValidationErrorsFn($event)">
</json-schema-form>
```

```html
<json-schema-form
[schema]="yourJsonSchema"
[layout]="yourJsonFormLayout"
[(data)]="yourData"
[options]="yourFormOptions"
[widgets]="yourCustomWidgets"
[language]="'fr'"
[framework]="'material-design'"
[loadExternalAssets]="true"
(onChanges)="yourOnChangesFn($event)"
(onSubmit)="yourOnSubmitFn($event)"
(isValid)="yourIsValidFn($event)"
(validationErrors)="yourValidationErrorsFn($event)">
</json-schema-form>
```

--------------------------------

### Register Widgets Programmatically with WidgetLibraryService

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Illustrates how to dynamically register new widgets or override existing ones using the registerWidget method of the WidgetLibraryService. This approach is suitable for programmatic customization, often within a component's constructor or lifecycle hook.

```javascript
import { WidgetLibraryService } from '@ajsf/core';
...
constructor(private widgetLibrary: WidgetLibraryService) { }
...
// Replace existing 'input' widget:
widgetLibrary.registerWidget('input', YourInputWidgetComponent);
// Add new 'custom-control' widget:
widgetLibrary.registerWidget('custom-control', YourCustomWidgetComponent);
```

--------------------------------

### Import Bootstrap3FrameworkModule into Angular AppModule

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

Imports and configures the Bootstrap3FrameworkModule in an Angular application's main module to enable Bootstrap 3 UI framework support for JSON Schema forms.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Bootstrap3FrameworkModule } from '@ajsf/bootstrap3';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    Bootstrap3FrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

--------------------------------

### Import MaterialDesignFrameworkModule into Angular AppModule

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Imports the MaterialDesignFrameworkModule from @ajsf/material into your main Angular application module. This step is necessary to enable the Material Design UI framework for your JSON schema forms.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialDesignFrameworkModule } from '@ajsf/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    MaterialDesignFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

--------------------------------

### Enable External Asset Loading in Options Object

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to enable automatic loading of external assets by adding `loadExternalAssets: true` to the `options` object passed to Angular JSON Schema Form. This provides a configuration-based approach for development.

```JavaScript
loadExternalAssets: true
```

--------------------------------

### Import Bootstrap4FrameworkModule into Angular AppModule

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

This JavaScript code snippet illustrates how to import `Bootstrap4FrameworkModule` and include it in the `imports` array of your main Angular application module (`AppModule`). This step activates the Bootstrap 4 UI framework for forms rendered by `@ajsf/json-schema-form`.

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Bootstrap4FrameworkModule } from '@ajsf/bootstrap4';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    Bootstrap4FrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

--------------------------------

### Integrate json-schema-form Component in Angular Template

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap4/README.md

This HTML snippet shows how to add the `json-schema-form` component to an Angular component's template. It requires binding a JSON schema object to `[schema]` and providing an `(onSubmit)` function to process form data, enabling dynamic form generation and submission handling.

```html
<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="bootstrap-4"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
```

--------------------------------

### AngularJS Compatibility with Angular JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Demonstrates how to use Angular JSON Schema Form with schemas and layouts previously used by Angular Schema Form (AngularJS), leveraging its `schema`, `form`, and `model` inputs for seamless transition.

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [form]="yourAngularSchemaFormLayout"
  [(model)]="yourData">
</json-schema-form>
```

--------------------------------

### React JSON Schema Form Compatibility with Angular JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Shows how to integrate Angular JSON Schema Form with existing React JSON Schema Form configurations, utilizing `schema`, `UISchema`, and `formData` inputs for compatibility.

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [UISchema]="yourReactJsonSchemaFormUISchema"
  [(formData)]="yourData">
</json-schema-form>
```

--------------------------------

### Display JSON Schema Form in Angular Template

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-material/README.md

Adds the `json-schema-form` component to an Angular component's template to render a form based on a provided JSON schema. The `loadExternalAssets` attribute ensures necessary assets are loaded, `framework` specifies the UI framework, and `onSubmit` binds to a function for processing form data.

```html
<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="material-design"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
```

--------------------------------

### Display JSON Schema Form in Angular Component Template

Source: https://github.com/hamzahamidi/ajsf/blob/main/projects/ajsf-bootstrap3/README.md

HTML snippet to embed a JSON Schema Form component in an Angular template, configuring it to use Bootstrap 3 framework and handle form submissions. The 'schema' input expects a valid JSON schema object, and 'onSubmit' binds to a function for processing submitted data.

```html
<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="bootstrap-3"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
```

--------------------------------

### Configure Widgets via Input Property in JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Demonstrates how to replace or add custom widgets by defining an object of widget components and binding it to the [widgets] input of the <json-schema-form> tag. This method allows for declarative widget customization directly within your Angular template.

```javascript
import { YourInputWidgetComponent } from './your-input-widget.component';
import { YourCustomWidgetComponent } from './your-custom-widget.component';
...
const yourNewWidgets = {
  input: YourInputWidgetComponent,          // Replace existing 'input' widget
  "custom-control": YourCustomWidgetComponent // Add new 'custom-control' widget
}
```

```html
<json-schema-form
  [schema]="yourJsonSchema"
  [widgets]="yourNewWidgets">
</json-schema-form>
```

--------------------------------

### Define Angular Conventional Commit Message Format

Source: https://github.com/hamzahamidi/ajsf/blob/main/CONTRIBUTING.md

Specifies the required structure for commit messages in the ajsf project, adhering to Angular Conventional Commit guidelines. It details the mandatory header (type, scope, subject), optional body, and optional footer, along with character limits.

```APIDOC
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

--------------------------------

### Setting Custom Validation Messages for the Entire Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Illustrates how to apply custom validation error messages globally for the entire form by including a `validationMessages` object within the `defautWidgetOptions` of the form options.

```javascript
const yourFormOptions = {
  defautWidgetOptions: {
    validationMessages: {
      // Put your error messages for the entire form here
    }
  }
}
```

--------------------------------

### jQuery JSON Form Compatibility with Angular JSON Schema Form

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

Illustrates how to use Angular JSON Schema Form with JSON Form (jQuery) configurations, by passing the schema, form layout, custom items, and data within a single `form` input object.

```html
<json-schema-form
  [form]="{
    schema: yourJsonSchema,
    form: yourJsonFormLayout,
    customFormItems: yourJsonFormCustomFormItems,
    value: yourData
  }">
</json-schema-form>
```

--------------------------------

### JSON Schema Built-in Validation Errors and Error Object Values

Source: https://github.com/hamzahamidi/ajsf/blob/main/README.md

This table lists the standard JSON Schema validation errors, specifies the data types they apply to, and details the properties available within their respective error objects when a validation failure occurs. This information is crucial for dynamically generating informative error messages.

```APIDOC
Error name       | Data type | Returned error object values
-----------------|-----------|-----------------------------------------
required         |  any      | (none)
type             |  any      | requiredType,          currentValue
const            |  any      | requiredValue,         currentValue
enum             |  any      | allowedValues,         currentValue
minLength        |  string   | minimumLength,         currentLength
maxLength        |  string   | maximumLength,         currentLength
pattern          |  string   | requiredPattern,       currentValue
format           |  string   | requiredFormat,        currentValue
minimum          |  number   | minimumValue,          currentValue
exclusiveMinimum |  number   | exclusiveMinimumValue, currentValue
maximum          |  number   | maximumValue,          currentValue
exclusiveMaximum |  number   | exclusiveMaximumValue, currentValue
multipleOf       |  number   | multipleOfValue,       currentValue
minProperties    |  object   | minimumProperties,     currentProperties
maxProperties    |  object   | maximumProperties,     currentProperties
 dependencies  * |  object   | (varies, based on dependencies schema)
minItems         |  array    | minimumItems,          currentItems
maxItems         |  array    | maximumItems,          currentItems
uniqueItems      |  array    | duplicateItems
 contains      * |  array    | requiredItem
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.