Top Angular Form Libraries

Filters

Top 5 Projects Compared

form
5,586

TanStack/form is a lightweight, framework-agnostic form management library for React, Vue, and Solid.js applications.

Code Example

import { useForm } from '@tanstack/react-form'

const form = useForm({ defaultValues: { name: '' } })
const { Field } = form

Pros

Framework-agnostic, supporting React, Vue, and Solid.js
Lightweight and performant, with minimal bundle size
Offers a simple and intuitive API for form management

Cons

Less mature compared to some other form libraries
May lack some advanced features found in more specialized form solutions
Limited ecosystem and community support compared to more established projects

survey-library
4,471

SurveyJS is a comprehensive JavaScript library for creating feature-rich, customizable surveys and forms.

Code Example

const survey = new Survey.Model({
  questions: [{ type: "text", name: "name", title: "Your name:" }]
});
survey.onComplete.add((sender, options) => {
  console.log("Survey results:", sender.data);
});

Pros

Offers a wide range of question types and advanced features out-of-the-box.
Provides a user-friendly survey builder interface for non-technical users.
Supports multiple frameworks (React, Vue, Angular) and vanilla JavaScript.

Cons

Has a steeper learning curve compared to simpler form libraries.
Larger bundle size due to its comprehensive feature set.
Commercial license required for some advanced features and removing branding.

ngx-formly
2,913

ngx-formly/ngx-formly is a dynamic form library for Angular that allows developers to create complex forms from simple JSON configurations.

Code Example

import { FormlyFieldConfig } from '@ngx-formly/core';

const fields: FormlyFieldConfig[] = [
  { key: 'name', type: 'input', templateOptions: { label: 'Name' } },
  { key: 'email', type: 'input', templateOptions: { label: 'Email', type: 'email' } }
];

Pros

Highly customizable and extensible, allowing developers to create custom field types and templates
Seamless integration with Angular's reactive forms, providing a familiar development experience
Supports complex form layouts and nested fields, making it suitable for a wide range of form requirements

Cons

Steeper learning curve compared to some simpler form libraries like TanStack/form
Less focus on JSON Schema validation compared to projects like eclipsesource/jsonforms or json-schema-form/angular-schema-form
Lacks built-in survey-specific features found in surveyjs/survey-library or formio/formio

jsonforms
2,467

eclipsesource/jsonforms is a JSON Schema-based form generation and validation library for web applications.

Code Example

import { JsonForms } from '@jsonforms/react';
const schema = { type: 'object', properties: { name: { type: 'string' } } };
const uischema = { type: 'VerticalLayout', elements: [{ type: 'Control', scope: '#/properties/name' }] };
<JsonForms schema={schema} uischema={uischema} data={{}} />

Pros

Offers a more declarative approach to form generation using JSON Schema and UI Schema
Provides better separation of concerns between data structure and UI representation
Supports multiple rendering frameworks (React, Angular, Vue) with a consistent API

Cons

May have a steeper learning curve compared to some other form libraries due to its schema-based approach
Less flexibility in custom styling compared to more lightweight libraries like TanStack/form
Smaller community and ecosystem compared to some more popular form libraries

angular-schema-form
2,463

Angular Schema Form is a popular library for generating dynamic forms in Angular applications based on JSON schemas.

Code Example

<form sf-schema="schema" sf-form="form" sf-model="model"></form>

Pros

Specifically designed for Angular, providing seamless integration with Angular applications
Extensive documentation and community support due to its long-standing presence in the Angular ecosystem
Offers a wide range of built-in form controls and customization options

Cons

Limited to Angular framework, unlike more versatile options like TanStack/form or formio/formio.js
May have a steeper learning curve compared to simpler form libraries like ngx-formly
Less actively maintained compared to some newer alternatives, potentially leading to compatibility issues with the latest Angular versions