Ngw-generic-forms NPM

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:

 <generic-form #formVar [config]="myConfig" (submit)="doSomethingwithSubmit(formValues)"></generic-form>
 ...
 <ng-template #randomTemplate let-groupVar="group" let-config="config">
 <p>For some crazy reason I want this in the middle of my form</p>
 <div [formGroup]="groupVar">
 <input type="text" (change)="fileInputChanged()" [formControlName]="config.name" >
</div>
</ng-template>

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

 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:

    @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