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