All Projects → Quramy → ngx-typed-forms

Quramy / ngx-typed-forms

Licence: MIT license
Extends Angular reactive forms strongly typed

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to ngx-typed-forms

vue-elementui-freedomen
elementui 应用级框架
Stars: ✭ 27 (+0%)
Mutual labels:  form
grapesjs-plugin-forms
Set of form components and blocks for the GrapesJS editor
Stars: ✭ 39 (+44.44%)
Mutual labels:  form
vue-auto-form
A vue2 component that helpers to easily create basic forms with automatic insert and update events, and automatic reactive validation.
Stars: ✭ 39 (+44.44%)
Mutual labels:  form
GenerateDynamicCustomForm
You can generate a dynamic form view in a few minutes for a signup, add a record. Creating a form is very easy.
Stars: ✭ 18 (-33.33%)
Mutual labels:  form
bulma-material-form
Material Design Form Elements for Bulma (CSS Only)
Stars: ✭ 26 (-3.7%)
Mutual labels:  form
jquery.niceform
The jQuery plugin for validation and post form data to server
Stars: ✭ 16 (-40.74%)
Mutual labels:  form
designable
🧩 Make everything designable 🧩
Stars: ✭ 2,156 (+7885.19%)
Mutual labels:  form
SwiftUIFormValidator
Declarative form validator for SwiftUI.
Stars: ✭ 34 (+25.93%)
Mutual labels:  form
react-html-form
Friendly form library for React ✌️
Stars: ✭ 58 (+114.81%)
Mutual labels:  form
Rails-4-ElasticSearch-dynamic-facets
Rails 4 ElasticSearch integration with dynamic facets
Stars: ✭ 16 (-40.74%)
Mutual labels:  form
TextFieldsTraversalController
A controller to manage the traversal of a collection of textfields.
Stars: ✭ 15 (-44.44%)
Mutual labels:  form
stook
A minimalist design state management library for React.
Stars: ✭ 86 (+218.52%)
Mutual labels:  form
BulkPDF
BulkPDF is a free and easy to use open source software, which allows to automatically fill an existing PDF form with differen values. Only a spreadsheet (Microsoft Excel 2007/2010/2013, LibreOffice or OpenOffice Calc) with the desired values is required.
Stars: ✭ 94 (+248.15%)
Mutual labels:  form
json-schema-js-gui-model
Handy gui model and associated translator that can be used to construct javascript UI forms from json-schemas
Stars: ✭ 19 (-29.63%)
Mutual labels:  form
form-create-designer
好用的vue可视化表单设计器
Stars: ✭ 634 (+2248.15%)
Mutual labels:  form
autoform
🤖📝 AutoForm is the simplest way to automatically generate fast, beautiful and standards/WCAG compliant HTML forms based on an Ecto Schema in a Phoenix Web Application to *significantly* speed up Web App Development. 🚀
Stars: ✭ 18 (-33.33%)
Mutual labels:  form
vue-form-2
Vue.js 2 Form Component
Stars: ✭ 60 (+122.22%)
Mutual labels:  form
vue3-form-validation
Vue Composition Function for Form Validation
Stars: ✭ 18 (-33.33%)
Mutual labels:  form
EasyForm-Android
该项目是一个android端用于生成复杂表格的库。可以用来做像Excel表格那样的UI界面。
Stars: ✭ 17 (-37.04%)
Mutual labels:  form
laravel-nova-nested-form
This package allows you to include your nested relationships' forms into a parent form.
Stars: ✭ 225 (+733.33%)
Mutual labels:  form

ngx-typed-forms wercker status npm version

Provides wrapped Angular's FormBuilder to write AbstractControl<T>. It's a workaround for issue#13721.

Install

yarn add ngx-typed-forms

or

npm install ngx-typed-forms

Remarks

This module requires TypeScript v2.3.2 or later because using Generics defaults feature.

Usage

First, import module into your app:

import { NgxTypedFormsModule } from 'ngx-typed-forms';

@NgModule({
  imports: [NgxTypedFormsModule],
})
export class AppModule { }

And you can build some form group with FormBuilder provided by this module. For example:

// import { FormBuilder } from '@angular/forms';
import { FormBuilder } from 'ngx-typed-forms';

@Component({...})
export MyFormComponent {

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    const group = this.formBuilder.group({
      firstName: 'Yosuke',
      lastName: 'Kurami',
    });

    group.valueChanges().subscrive(user => {
      /* the user argument has a type, { firstName: string; lastName: string } */
    });
  }
}

Or more complex example:

interface ComplexForm {
  name: {
    first: string;
    last: string;
  };
  age: number;
  favoriteDishes: string[];
};

const form = formBuilder.group<ComplexForm>({
  name: fb.group({ first: 'Yosuke', last: 'Kurami' }),
  age: 32,
  favoriteDishes: fb.array<string>([fb.control('faboriteDish')]),
});

const nameCtrl = form.get('name'); // returns AbstractControl<{ first: string; last: string; }>
nameCtrl.valueChanges.subscribe(({ last, first }) => console.log(last, first));

License

This software is released under the MIT License, see LICENSE under the this repository.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].