https://github.com/fluent-form/fluent-form

Building dynamic form in Angular with Fluent API and JSON
https://github.com/fluent-form/fluent-form

angular angular-forms compose-api dynamic-form fluent-api json-form ng-zorro-antd reactive-forms schema-form

Last synced: 12 days ago
JSON representation

Building dynamic form in Angular with Fluent API and JSON

• Host: GitHub
• URL: https://github.com/fluent-form/fluent-form
• Owner: fluent-form
• License: mit
• Created: 2022-03-07T10:17:16.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2026-03-31T11:26:37.000Z (17 days ago)
• Last Synced: 2026-03-31T13:22:15.011Z (17 days ago)
• Topics: angular, angular-forms, compose-api, dynamic-form, fluent-api, json-form, ng-zorro-antd, reactive-forms, schema-form
• Language: TypeScript
• Homepage: https://fluent-form.github.io/fluent-form/
• Size: 9.37 MB
• Stars: 53
• Watchers: 2
• Forks: 3
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• fucking-awesome-angular - fluent-form - Building dynamic form in Angular with Fluent API or JSON. (Third Party Components / JSON Forms)
• awesome-angular - fluent-form - Building dynamic form in Angular with Fluent API or JSON. (Third Party Components / JSON Forms)

README

          


  


    

  


  An Angular dynamic forms library powered by Fluent API and JSON.

  [![npm version](https://img.shields.io/npm/v/@fluent-form/core/latest.svg)](https://www.npmjs.com/settings/fluent-form/packages)

  ![CI](https://github.com/fluent-form/fluent-form/actions/workflows/ci.yml/badge.svg)

  ![License](https://img.shields.io/badge/License-MIT-blue.svg)

  [![Angular](https://img.shields.io/badge/Angular-≥19.0.0-red?logo=angular)](https://www.github.com/angular/angular)

  [![codecov](https://codecov.io/gh/fluent-form/fluent-form/branch/main/graph/badge.svg?token=070GEU44U0)](https://codecov.io/gh/fluent-form/fluent-form)

  [![CodeFactor](https://www.codefactor.io/repository/github/fluent-form/fluent-form/badge)](https://www.codefactor.io/repository/github/fluent-form/fluent-form)



## Features

- Support for using the Fluent API and JSON.

- Based on embedded view, no host element, supports nested layout.

- Tree shakable, supports lazy loading and preloading.

- Built on Angular reactive forms.

- Supports integration with UI libraries.

## Install

```bash

ng add @fluent-form/core

```

## Docs

For documentation and examples please visit [https://fluent-form.github.io/fluent-form](https://fluent-form.github.io/fluent-form).

## Usage

```ts

import { FluentForm, form } from '@fluent-form/core';

import { button, numberField, textField, textArea } from '@fluent-form/ui-zorro';

@Component({

  imports: [FluentForm],

  template: ``

})

export class ExampleComponent {

  readonly schema = form(() => {

    textField('name').label('Name').required(true);

    numberField('age').label('Age').required(true);

    textArea('bio').label('Bio').placeholder('Tell us about yourself');

    button().content('Submit');

  });

  readonly model = signal({

    name: 'John Doe',

    age: null,

    bio: 'I love fluent form'

  });

}

```

## Stage

Currently in beta, we look forward to your active trial, we will continue to actively collect user feedback, rapid iteration and continuous improvement of functionality and performance.

## Changelog

[Learn about the latest improvements.](https://github.com/fluent-form/fluent-form/blob/main/CHANGELOG.md)

## Support

Do you love ✨ fluent-form ✨ ? Star for [this](https://github.com/fluent-form/fluent-form) project!

##  Special thanks

Thanks to [JetBrains](https://www.jetbrains.com/?from=fluent-form) for supporting us free open source licenses.

![JetBrains Logo (Main) logo](https://resources.jetbrains.com/storage/products/company/brand/logos/jb_beam.svg)

## License

[MIT](https://github.com/fluent-form/fluent-form/blob/main/LICENSE)