@iresa/ngx-questionaire-form v1.0.1

NGX-QUESTIONAIRE-FORM

Questionaire form builder for modern Angular apps

Buidling a long list of questions has never been easier. Demo: https://iresa-org.github.io/ngx-questionaire-form

Features

• ✅ Display a list of questions via JSON configurations
• ✅ Allow user-generated templates
• ✅ Support single or multiple choice answers

Table of Contents

• Installation
• Usage
• Contributors

Installation

From your project folder, run ng add @iresa/ngx-questionaire-form

This command will import NgxQuestionaireFormModule and BrowserAnimationsModule into your AppModule. If the app doesn't support animation, import NoopAnimationsModule instead:

import { NgxQuestionaireFormModule } from '@iresa/ngx-questionaire-form';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 
@NgModule({
  ...
  imports: [
    ...
    
    BrowserAnimationsModule // NoopAnimationsModule

    // NgxQuestionaireFormModule
    NgxQuestionaireFormModule, 
    ...
  ],
  ...
})
export class AppModule {}

Or register NgxQuestionaireFormModule to a feature module with following code:

import { NgxQuestionaireFormModule } from '@iresa/ngx-questionaire-form';
 
@NgModule({
  ...
  imports: [
    ...
    
    // NgxQuestionaireFormModule
    NgxQuestionaireFormModule, 
    ...
  ],
  ...
})
export class FeatureModule {}

Usage

Consume the component in the template

<ngx-questionaire-form 
  [formConfig]="formConfig" 
  (formInit)="onFormInit($event)">

  <!-- Custom template for each question -->
  <div *questionaireTemplate="let questionConfig; let index = index">
    ...
  </div>
</ngx-questionaire-form>

Form Configurations and Form APIs

import { FormApi, QuestionaireConfig } from '@iresa/ngx-questionaire-form';
  
  formApi: FormApi;
  formConfig: QuestionaireConfig[] = [
    { 
      question: 'What is your favorite color?', 
      options: [
        { label: 'Red', value: 'red' }, 
        { label: 'Yellow', value: 'yellow' }, 
        { label: 'Blue', value: 'blue' }, 
        { label: 'Orange', value: 'orange' }]
    },
    ...
  ];

  onFormInit(formApi: FormApi): void {
    this.formApi = formApi;
  }

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

This project uses schematics from @ngneat/lib to generate boilerplate used for open source library.