Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dsasidhar/ngw-generic-forms

Forms that can be generated from an object
https://github.com/dsasidhar/ngw-generic-forms

angular2 forms typescript

Last synced: 12 days ago
JSON representation

Forms that can be generated from an object

Awesome Lists containing this project

README

        

# ngw-generic-forms
Forms that can be generated from a json object

Install with
`npm install --save 'ngw-generic-forms'`
or
`yarn add ngw-generic-form`

# What is ngw-generic-forms module

Use it if:

* You need forms.
* You need them quick.
* All the forms you have follow more or less the same structure.

Here is a example of how you can use it:
```html

...

For some crazy reason I want this in the middle of my form




```
In your component code prepare a config object that does the magic for you:

```javascript
this.myConfig = {
type: 'container',
cssClass: 'parent-container',
errorMap: this.errorMessages,
children: [
{
type: 'input',
name: 'name',
inputType: 'text',
placeholder: 'Full name',
cssClass: 'input-name',
validators: [Validators.compose([
Validators.required,
ValidationUtil.userNameValidator,
])]
},
{
type: 'template-field',
name: 'hello',
template: this.template
},
{
type: 'select',
name: 'food',
cssClass: 'select-food',
options: ['Pizza', 'Hot Dogs', 'Knakworstje', 'Coffee'],
placeholder: 'Favourite food'
},
{
type: 'container',
cssClass: 'firstChild',
children: [
{
type: 'input',
name: 'age',
placeholder: 'Age',
cssClass: 'age-holder'
}
]
}
]
};
```

You can nest it any levels deep, to go a level deeper add a object of type `container` that will create a new container DOM node.

| Parameters | Allowed values and interpretation |
|------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| type | Describe the type of form element needed Allowed types: `container`,`input`,`select`,`template` |
| name | name of the control in the form. (Not applicable for containers and template types) |
| errorMap | Key value pairs. With keys as the names of the controls in the form, values as objects containing possible error keys and the error message to be displayed when that validation error occurs. (Only applicable on outermost container) |
| children | Only applicable on containers, list of all form elements in this container. (A container can also be a child of other containers) |
| inputType | Used with `type: input` to specify the input types. (Do not use input type `file`) |
| cssClass | The cssClass to be applied on this element/container |
| validators | Only applicable on form components, the validators to be applied to this form element. |
| template | provide a template reference to inject into the form (use with type: `template`, `template-field` |
| options | Used along with type `select` to specify the options |

In your component file you can use the template reference captured earlier to access other convineant apis:
```javascript

@ViewChild('formVar')
private formVar;
```

In `afterViewInit` we can then use different methods:
* `this.formVar.setError(fieldName,error)`: set Erros on a specific field.
* `this.formVar.setCustomError(fieldName,error)`: set only customError, this is removed as soon as user changes the field.
* `this.formVar.valid`: validity of the form.
* `this.formVar.value`: get all the current values of the form