├── src ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── app │ ├── _services │ │ ├── index.ts │ │ ├── question.service.spec.ts │ │ ├── question-control.service.spec.ts │ │ ├── question-control.service.ts │ │ └── question.service.ts │ ├── _components │ │ └── common │ │ │ ├── dynamic-form-question │ │ │ ├── dynamic-form-question.component.scss │ │ │ ├── dynamic-form-question.module.ts │ │ │ ├── dynamic-form-question.component.spec.ts │ │ │ ├── dynamic-form-question.component.ts │ │ │ └── dynamic-form-question.component.html │ │ │ └── dynamic-form │ │ │ ├── dynamic-form.component.html │ │ │ ├── dynamic-form.component.scss │ │ │ ├── dynamic-form.module.ts │ │ │ ├── dynamic-form.component.ts │ │ │ └── dynamic-form.component.spec.ts │ ├── _models │ │ ├── index.ts │ │ ├── question-dropdown.ts │ │ ├── question-textbox.ts │ │ ├── question-textarea.ts │ │ └── question-base.ts │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── app.component.spec.ts │ ├── app.component.scss │ └── app.component.html ├── styles.scss ├── main.ts ├── index.html ├── test.ts └── polyfills.ts ├── e2e ├── tsconfig.json ├── src │ ├── app.po.ts │ └── app.e2e-spec.ts └── protractor.conf.js ├── tsconfig.app.json ├── .editorconfig ├── tsconfig.spec.json ├── browserslist ├── .travis.yml ├── .gitignore ├── tsconfig.json ├── README.md ├── karma.conf.js ├── package.json ├── tslint.json └── angular.json /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maximelafarie/angular-dynamic-forms/HEAD/src/favicon.ico -------------------------------------------------------------------------------- /src/app/_services/index.ts: -------------------------------------------------------------------------------- 1 | export * from './question.service'; 2 | export * from './question-control.service'; 3 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form-question/dynamic-form-question.component.scss: -------------------------------------------------------------------------------- 1 | .errorMessage{ 2 | color:red; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/_models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './question-base'; 2 | export * from './question-dropdown'; 3 | export * from './question-textbox'; 4 | export * from './question-textarea'; 5 | 6 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | const routes: Routes = []; 5 | 6 | @NgModule({ 7 | imports: [RouterModule.forRoot(routes)], 8 | exports: [RouterModule] 9 | }) 10 | export class AppRoutingModule { } 11 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* Custom styles for options */ 2 | .good { 3 | border-color: green !important; 4 | } 5 | 6 | .bad { 7 | border-color: red !important; 8 | } 9 | 10 | textarea { 11 | resize: vertical; 12 | } 13 | 14 | pre { 15 | max-height: 40vh; 16 | overflow: scroll; 17 | } 18 | 19 | button { 20 | margin-right: 5px; 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/app/_models/question-dropdown.ts: -------------------------------------------------------------------------------- 1 | import { QuestionBase } from './question-base'; 2 | 3 | export class DropdownQuestion extends QuestionBase { 4 | controlType = 'dropdown'; 5 | options: { key: string, value: string }[] = []; 6 | 7 | constructor(options: {} = {}) { 8 | super(options); 9 | this.options = options['options'] || []; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /src/app/_services/question.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { QuestionService } from './question.service'; 4 | 5 | describe('QuestionService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({ 7 | providers: [QuestionService] 8 | })); 9 | 10 | it('should be created', () => { 11 | const service: QuestionService = TestBed.get(QuestionService); 12 | expect(service).toBeTruthy(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, VERSION } from '@angular/core'; 2 | 3 | import { QuestionService } from '@app/services'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.scss'] 9 | }) 10 | export class AppComponent { 11 | 12 | questions: any[]; 13 | version = VERSION.full; 14 | 15 | constructor(service: QuestionService) { 16 | this.questions = service.getQuestions(); 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/_services/question-control.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { QuestionControlService } from './question-control.service'; 4 | 5 | describe('QuestionControlService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({ 7 | providers: [QuestionControlService] 8 | })); 9 | 10 | it('should be created', () => { 11 | const service: QuestionControlService = TestBed.get(QuestionControlService); 12 | expect(service).toBeTruthy(); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /src/app/_models/question-textbox.ts: -------------------------------------------------------------------------------- 1 | import { QuestionBase } from './question-base'; 2 | 3 | export class TextboxQuestion extends QuestionBase { 4 | controlType = 'textbox'; 5 | type: string; 6 | min: number | string; 7 | max: number | string; 8 | pattern: string; 9 | 10 | constructor(options: {} = {}) { 11 | super(options); 12 | this.type = options['type'] || 'text'; 13 | this.min = options['min']; 14 | this.max = options['max']; 15 | this.pattern = options['pattern']; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/_models/question-textarea.ts: -------------------------------------------------------------------------------- 1 | import { QuestionBase } from './question-base'; 2 | 3 | export class TextareaQuestion extends QuestionBase { 4 | controlType = 'textarea'; 5 | cols: number; 6 | rows: number; 7 | maxlength: number; 8 | minlength: number; 9 | 10 | constructor(options: {} = {}) { 11 | super(options); 12 | this.cols = options['cols'] || 0; 13 | this.rows = options['rows'] || 0; 14 | this.maxlength = options['maxlength'] || null; 15 | this.minlength = options['minlength'] || null; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form-question/dynamic-form-question.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 4 | 5 | import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | CommonModule, 10 | FormsModule, 11 | ReactiveFormsModule 12 | ], 13 | declarations: [DynamicFormQuestionComponent], 14 | exports: [DynamicFormQuestionComponent] 15 | }) 16 | export class DynamicFormQuestionModule { } 17 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | import { DynamicFormModule } from './_components/common/dynamic-form/dynamic-form.module'; 8 | import { QuestionService } from '@app/services'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | AppComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | AppRoutingModule, 17 | DynamicFormModule 18 | ], 19 | providers: [QuestionService], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: required 2 | dist: trusty 3 | addons: 4 | chrome: stable 5 | language: node_js 6 | node_js: 7 | - stable 8 | before_install: 9 | - echo "$TRAVIS_BRANCH" 10 | - echo "$TRAVIS_PULL_REQUEST" 11 | - export DISPLAY=:99.0 12 | - sh -e /etc/init.d/xvfb start 13 | - export CHROME_BIN=chromium-browser 14 | install: 15 | - npm install 16 | script: 17 | - npm run lint 18 | - npm run test 19 | - if [ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == false ]; then npm run ghpages; fi 20 | deploy: 21 | provider: pages 22 | skip_cleanup: true 23 | local_dir: dist/angular-dynamic-forms 24 | github_token: $PUSH_TOKEN 25 | on: 26 | branch: master 27 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form/dynamic-form.component.html: -------------------------------------------------------------------------------- 1 |
2 |
4 | 5 |
7 | 9 |
10 | 11 |
12 | 14 |
15 |
16 | 17 |
19 | Saved the following values
20 | 
{{ payLoad | json }}
21 |
22 |
23 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | import { AppModule } from './app.module'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(async(() => { 8 | TestBed.configureTestingModule({ 9 | imports: [ 10 | RouterTestingModule, 11 | AppModule 12 | ] 13 | }).compileComponents(); 14 | })); 15 | 16 | it('should create the app', () => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | NgxSmartForm 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | pre { 3 | code { 4 | max-width: 0; 5 | } 6 | } 7 | 8 | .github-corner:hover .octo-arm { 9 | animation: octocat-wave 560ms ease-in-out; 10 | } 11 | 12 | @keyframes octocat-wave { 13 | 0%, 14 | 100% { 15 | transform: rotate(0); 16 | } 17 | 18 | 20%, 19 | 60% { 20 | transform: rotate(-25deg); 21 | } 22 | 23 | 40%, 24 | 80% { 25 | transform: rotate(10deg); 26 | } 27 | } 28 | 29 | @media (max-width: 500px) { 30 | .github-corner:hover .octo-arm { 31 | animation: none; 32 | } 33 | 34 | .github-corner .octo-arm { 35 | animation: octocat-wave 560ms ease-in-out; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to angular-dynamic-forms!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form/dynamic-form.component.scss: -------------------------------------------------------------------------------- 1 | // /* pre { 2 | // white-space: pre-wrap; /* css-3 */ 3 | // white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 4 | // white-space: -pre-wrap; /* Opera 4-6 */ 5 | // white-space: -o-pre-wrap; /* Opera 7 */ 6 | // word-wrap: break-word; /* Internet Explorer 5.5+ */ 7 | // display: block; 8 | // padding: 9.5px; 9 | // margin: 0 0 10px; 10 | // font-size: 13px; 11 | // line-height: 1.428571429; 12 | // color: #333; 13 | // word-break: break-all; 14 | // word-wrap: break-word; 15 | // background-color: #f5f5f5; 16 | // border: 1px solid #ccc; 17 | // border-radius: 4px; 18 | // } 19 | 20 | // .form-row{ 21 | // margin-top: 10px; 22 | // } 23 | // */ 24 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form/dynamic-form.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 4 | 5 | import { DynamicFormComponent } from './dynamic-form.component'; 6 | import { DynamicFormQuestionModule } from '../dynamic-form-question/dynamic-form-question.module'; 7 | 8 | import { QuestionControlService } from '@app/services'; 9 | 10 | @NgModule({ 11 | imports: [ 12 | CommonModule, 13 | FormsModule, 14 | ReactiveFormsModule, 15 | DynamicFormQuestionModule 16 | ], 17 | providers: [QuestionControlService], 18 | declarations: [DynamicFormComponent], 19 | exports: [DynamicFormComponent] 20 | }) 21 | export class DynamicFormModule { 22 | } 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events.json 15 | speed-measure-plugin.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form/dynamic-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | import { FormGroup } from '@angular/forms'; 3 | 4 | import { QuestionBase } from '@app/models'; 5 | import { QuestionControlService } from '@app/services'; 6 | 7 | @Component({ 8 | selector: 'app-dynamic-form', 9 | templateUrl: './dynamic-form.component.html', 10 | styleUrls: ['./dynamic-form.component.scss'] 11 | }) 12 | export class DynamicFormComponent implements OnInit { 13 | 14 | @Input() questions: QuestionBase[] = []; 15 | form: FormGroup; 16 | payLoad = ''; 17 | 18 | constructor(private qcs: QuestionControlService) { } 19 | 20 | ngOnInit() { 21 | this.form = this.qcs.toFormGroup(this.questions); 22 | } 23 | 24 | onSubmit() { 25 | this.payLoad = this.form.value; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form/dynamic-form.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DynamicFormComponent } from './dynamic-form.component'; 4 | import { DynamicFormModule } from './dynamic-form.module'; 5 | 6 | describe('DynamicFormComponent', () => { 7 | let component: DynamicFormComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | imports: [ DynamicFormModule ] 13 | }) 14 | .compileComponents(); 15 | })); 16 | 17 | beforeEach(() => { 18 | fixture = TestBed.createComponent(DynamicFormComponent); 19 | component = fixture.componentInstance; 20 | fixture.detectChanges(); 21 | }); 22 | 23 | it('should create', () => { 24 | expect(component).toBeTruthy(); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /src/app/_models/question-base.ts: -------------------------------------------------------------------------------- 1 | export class QuestionBase { 2 | value: T; 3 | key: string; 4 | label: string; 5 | required: boolean; 6 | order: number; 7 | controlType: string; 8 | placeholder: string; 9 | iterable: boolean; 10 | 11 | constructor(options: { 12 | value?: T, 13 | key?: string, 14 | label?: string, 15 | required?: boolean, 16 | order?: number, 17 | controlType?: string, 18 | placeholder?: string, 19 | iterable?: boolean 20 | } = {}) { 21 | this.value = options.value; 22 | this.key = options.key || ''; 23 | this.label = options.label || ''; 24 | this.required = !!options.required; 25 | this.order = options.order === undefined ? 1 : options.order; 26 | this.controlType = options.controlType || ''; 27 | this.placeholder = options.placeholder || ''; 28 | this.iterable = !!options.iterable; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "paths": { 18 | "@app/services": [ 19 | "src/app/_services" 20 | ], 21 | "@app/services/*": [ 22 | "src/app/_services/*" 23 | ], 24 | "@app/directives": [ 25 | "src/app/_directives" 26 | ], 27 | "@app/directives/*": [ 28 | "src/app/_directives/*" 29 | ], 30 | "@app/components": [ 31 | "src/app/_components" 32 | ], 33 | "@app/components/*": [ 34 | "src/app/_components/*" 35 | ], 36 | "@app/models": [ 37 | "src/app/_models" 38 | ], 39 | "@app/models/*": [ 40 | "src/app/_models/*" 41 | ] 42 | }, 43 | "lib": [ 44 | "es2018", 45 | "dom" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/maximelafarie/angular-dynamic-forms.svg?branch=master)](https://travis-ci.org/maximelafarie/angular-dynamic-forms) 2 | 3 | # NgxSmartForm 4 | 5 | **[Demo](https://maximelafarie.com/angular-dynamic-forms/)** • **[Post on Dev.to](https://dev.to/max/build-dynamic-angular-forms-on-the-fly-4n3m)** 6 | 7 | ## Build dynamic Angular forms on-the-fly 8 | 9 | The purpose of this project is to demonstrate the automation of creation of Angular forms with dynamic models. 10 | 11 | You can find a full-dedicated tutorial with explanations on my post: 12 | 13 | 👉👉 **https://dev.to/max/build-dynamic-angular-forms-on-the-fly-4n3m** 👈👈 14 | 15 | ## Development server 16 | 17 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 18 | 19 | ## Build 20 | 21 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. 22 | 23 | ## Running unit tests 24 | 25 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 26 | 27 | ## Running end-to-end tests 28 | 29 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 30 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/angular-dynamic-forms'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | browsers: ['Chrome'], 24 | customLaunchers: { 25 | ChromeHeadlessCI: { 26 | base: 'ChromeHeadless', 27 | flags: ['--no-sandbox', '--disable-gpu'] 28 | } 29 | }, 30 | reporters: ['progress', 'kjhtml'], 31 | port: 9876, 32 | colors: true, 33 | logLevel: config.LOG_INFO, 34 | autoWatch: true, 35 | browsers: ['Chrome'], 36 | singleRun: true, 37 | restartOnFileChange: false 38 | }); 39 | }; 40 | -------------------------------------------------------------------------------- /src/app/_services/question-control.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms'; 3 | 4 | import { QuestionBase } from '@app/models'; 5 | 6 | @Injectable() 7 | export class QuestionControlService { 8 | 9 | constructor() { } 10 | 11 | toFormGroup(questions: QuestionBase[]) { 12 | const group: any = {}; 13 | 14 | questions.forEach(question => { 15 | 16 | if (question.iterable) { 17 | 18 | if (!Array.isArray(question.value)) { 19 | question.value = !!question.value ? [question.value] : ['']; 20 | } 21 | 22 | const tmpArray: FormArray = question.required ? new FormArray([]) : new FormArray([], Validators.required); 23 | 24 | if (!question.value || !question.value.length) { 25 | tmpArray.push(new FormControl('')); 26 | } else { 27 | question.value.forEach(val => { 28 | tmpArray.push(new FormControl(val)); 29 | }); 30 | } 31 | 32 | group[question.key] = tmpArray; 33 | 34 | } else { 35 | 36 | group[question.key] = question.required ? new FormControl(question.value || '', Validators.required) 37 | : new FormControl(question.value || ''); 38 | 39 | } 40 | 41 | }); 42 | return new FormGroup(group); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form-question/dynamic-form-question.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { DynamicFormQuestionComponent } from './dynamic-form-question.component'; 4 | import { DynamicFormQuestionModule } from './dynamic-form-question.module'; 5 | import { FormGroup, FormControl } from '@angular/forms'; 6 | 7 | describe('DynamicFormQuestionComponent', () => { 8 | let component: DynamicFormQuestionComponent; 9 | let fixture: ComponentFixture; 10 | 11 | beforeEach(async(() => { 12 | TestBed.configureTestingModule({ 13 | imports: [DynamicFormQuestionModule] 14 | }) 15 | .compileComponents(); 16 | })); 17 | 18 | beforeEach(() => { 19 | fixture = TestBed.createComponent(DynamicFormQuestionComponent); 20 | component = fixture.componentInstance; 21 | 22 | // Mock form 23 | component.form = new FormGroup({ 24 | firstName: new FormControl() 25 | }); 26 | 27 | // Mock question 28 | component.question = { 29 | value: 'Bombasto', 30 | key: 'firstName', 31 | label: 'First name', 32 | required: true, 33 | order: 1, 34 | controlType: 'textbox', 35 | placeholder: '', 36 | iterable: false 37 | }; 38 | 39 | fixture.detectChanges(); 40 | }); 41 | 42 | it('should create', () => { 43 | expect(component).toBeTruthy(); 44 | }); 45 | }); 46 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form-question/dynamic-form-question.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input } from '@angular/core'; 2 | import { FormGroup, FormArray, FormBuilder, AbstractControl } from '@angular/forms'; 3 | 4 | import { QuestionBase } from '@app/models'; 5 | 6 | @Component({ 7 | selector: 'app-question', 8 | templateUrl: './dynamic-form-question.component.html', 9 | styleUrls: ['./dynamic-form-question.component.scss'] 10 | }) 11 | export class DynamicFormQuestionComponent implements OnInit { 12 | 13 | @Input() question: QuestionBase; 14 | @Input() form: FormGroup; 15 | get isValid() { return this.form.controls[this.question.key].valid; } 16 | 17 | constructor(private fb: FormBuilder) { } 18 | 19 | ngOnInit() { } 20 | 21 | private asFormArray(ctrl: AbstractControl): FormArray { 22 | return ctrl as FormArray; 23 | } 24 | 25 | public addQuestion(): void { 26 | this.questionArray.push(this.fb.control('')); 27 | } 28 | 29 | public removeQuestion(index: number): void { 30 | this.questionArray.removeAt(index); 31 | } 32 | 33 | public get questionArray(): FormArray { 34 | return this.form.get(this.question.key) as FormArray; 35 | } 36 | 37 | public get questionIsIterable(): boolean { 38 | return !!this.question && this.question.iterable; 39 | } 40 | 41 | public questionControl(index?: number): AbstractControl { 42 | return this.questionIsIterable ? this.asFormArray(this.form.get(this.question.key)).controls[index] : this.form.get(this.question.key); 43 | } 44 | 45 | public questionId(index?: number): string { 46 | return this.questionIsIterable ? `${this.question.key}-${index}` : this.question.key; 47 | } 48 | 49 | public questionLabel(index?: number): string { 50 | return this.questionIsIterable ? `${this.question.label} n°${index + 1}` : this.question.label; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-dynamic-forms", 3 | "description": "Create on-the-fly forms with Angular", 4 | "version": "1.0.0", 5 | "author": "Maxime LAFARIE ", 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "build": "ng build", 10 | "test": "ng test --watch=false --progress=false --browsers=ChromeHeadlessCI", 11 | "lint": "ng lint", 12 | "e2e": "ng e2e", 13 | "ghpages": "npm i && ng build --prod --aot --no-progress --base-href '/angular-dynamic-forms/'" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular-builders/custom-webpack": "^8.4.1", 18 | "@angular/animations": "~8.2.14", 19 | "@angular/common": "~8.2.14", 20 | "@angular/compiler": "~8.2.14", 21 | "@angular/core": "~8.2.14", 22 | "@angular/forms": "~8.2.14", 23 | "@angular/platform-browser": "~8.2.14", 24 | "@angular/platform-browser-dynamic": "~8.2.14", 25 | "@angular/router": "~8.2.14", 26 | "rxjs": "~6.5.3", 27 | "tslib": "^1.10.0", 28 | "zone.js": "~0.10.2" 29 | }, 30 | "devDependencies": { 31 | "@angular-devkit/build-angular": "^0.803.24", 32 | "@angular/cli": "~8.3.20", 33 | "@angular/compiler-cli": "~8.2.14", 34 | "@angular/language-service": "~8.2.14", 35 | "@babel/compat-data": "7.8.0", 36 | "@types/jasmine": "~3.5.0", 37 | "@types/jasminewd2": "~2.0.8", 38 | "@types/node": "~12.12.17", 39 | "codelyzer": "^5.2.0", 40 | "jasmine-core": "~3.5.0", 41 | "jasmine-spec-reporter": "~4.2.1", 42 | "karma": "~4.4.1", 43 | "karma-chrome-launcher": "~3.1.0", 44 | "karma-coverage-istanbul-reporter": "~2.1.1", 45 | "karma-jasmine": "~2.0.1", 46 | "karma-jasmine-html-reporter": "^1.4.2", 47 | "protractor": "~5.4.2", 48 | "ts-node": "~8.5.4", 49 | "tslint": "~5.20.1", 50 | "typescript": "~3.5.3" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/app/_services/question.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { 4 | QuestionBase, 5 | DropdownQuestion, 6 | TextboxQuestion, 7 | TextareaQuestion 8 | } from '@app/models'; 9 | 10 | @Injectable() 11 | export class QuestionService { 12 | 13 | // TODO: get from a remote source of question metadata 14 | // TODO: make asynchronous 15 | getQuestions() { 16 | 17 | const questions: QuestionBase[] = [ 18 | 19 | new DropdownQuestion({ 20 | key: 'brave', 21 | label: 'Bravery Rating', 22 | options: [ 23 | { key: 'solid', value: 'Solid' }, 24 | { key: 'great', value: 'Great' }, 25 | { key: 'good', value: 'Good' }, 26 | { key: 'unproven', value: 'Unproven' } 27 | ], 28 | placeholder: 'Select one option', 29 | order: 3 30 | }), 31 | 32 | new TextboxQuestion({ 33 | key: 'firstName', 34 | label: 'First name', 35 | value: 'Bombasto', 36 | required: true, 37 | order: 1 38 | }), 39 | 40 | new TextboxQuestion({ 41 | key: 'jobs', 42 | label: 'Jobs', 43 | value: ['toto'], 44 | iterable: true, 45 | order: 5 46 | }), 47 | 48 | new TextboxQuestion({ 49 | key: 'level', 50 | label: 'Level', 51 | type: 'range', 52 | value: 70, 53 | min: 20, 54 | max: 200, 55 | order: 6 56 | }), 57 | 58 | new TextboxQuestion({ 59 | key: 'emailAddress', 60 | label: 'Email', 61 | type: 'email', 62 | order: 2 63 | }), 64 | 65 | new TextareaQuestion({ 66 | key: 'message', 67 | label: 'Message', 68 | cols: 30, 69 | rows: 10, 70 | placeholder: 'Your message here...', 71 | order: 4 72 | }) 73 | ]; 74 | 75 | return questions.sort((a, b) => a.order - b.order); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/app/_components/common/dynamic-form-question/dynamic-form-question.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 5 | 6 | 7 |
8 | 9 | 17 | 18 | 28 | 29 | 37 |
38 | 39 |
{{ question.label }} is required
41 | 42 | 43 | 44 |
45 |
46 | 48 | 49 | 52 | 53 | 56 | 57 |
58 |
59 | 60 |
61 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warn" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-angle-bracket-type-assertion": false, 61 | "no-string-literal": false, 62 | "no-non-null-assertion": true, 63 | "no-redundant-jsdoc": true, 64 | "no-switch-case-fall-through": true, 65 | "no-use-before-declare": true, 66 | "no-var-requires": false, 67 | "object-literal-key-quotes": [ 68 | true, 69 | "as-needed" 70 | ], 71 | "object-literal-sort-keys": false, 72 | "ordered-imports": false, 73 | "quotemark": [ 74 | true, 75 | "single" 76 | ], 77 | "trailing-comma": false, 78 | "no-conflicting-lifecycle": true, 79 | "no-host-metadata-property": true, 80 | "no-input-rename": true, 81 | "no-inputs-metadata-property": true, 82 | "no-output-native": true, 83 | "no-output-on-prefix": true, 84 | "no-output-rename": true, 85 | "no-outputs-metadata-property": true, 86 | "template-banana-in-box": true, 87 | "template-no-negated-async": true, 88 | "use-lifecycle-interface": true, 89 | "use-pipe-transform-interface": true 90 | }, 91 | "rulesDirectory": [ 92 | "codelyzer" 93 | ] 94 | } 95 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 21 | 22 | 23 | 24 |
25 | 26 |
27 |
28 |

Job Application for Heroes

29 |

Here is an example of how you can build on-the-fly forms with Angular. The form is the form as defined in The data object. You also can see the changes while you're modifying the form's values in The result section.

30 |
31 |
32 | 33 |
34 |
35 |

The form

36 | 38 |
39 |
40 | 41 |
42 |
43 |

The result

44 | 
{{ dynamicForm.form.value | json }}
45 |
46 |
47 | 48 |
49 |
50 |

The data object

51 | 
{{ questions | json }}
52 |
53 |
54 | 55 |
56 |
57 | 58 | 59 | 63 | 64 |
65 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-dynamic-forms": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/angular-dynamic-forms", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "aot": false, 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets" 29 | ], 30 | "styles": [ 31 | "src/styles.scss" 32 | ], 33 | "scripts": [] 34 | }, 35 | "configurations": { 36 | "production": { 37 | "fileReplacements": [ 38 | { 39 | "replace": "src/environments/environment.ts", 40 | "with": "src/environments/environment.prod.ts" 41 | } 42 | ], 43 | "optimization": true, 44 | "outputHashing": "all", 45 | "sourceMap": false, 46 | "extractCss": true, 47 | "namedChunks": false, 48 | "aot": true, 49 | "extractLicenses": true, 50 | "vendorChunk": false, 51 | "buildOptimizer": true, 52 | "budgets": [ 53 | { 54 | "type": "initial", 55 | "maximumWarning": "2mb", 56 | "maximumError": "5mb" 57 | } 58 | ] 59 | } 60 | } 61 | }, 62 | "serve": { 63 | "builder": "@angular-devkit/build-angular:dev-server", 64 | "options": { 65 | "browserTarget": "angular-dynamic-forms:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "angular-dynamic-forms:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "angular-dynamic-forms:build" 77 | } 78 | }, 79 | "test": { 80 | "builder": "@angular-devkit/build-angular:karma", 81 | "options": { 82 | "main": "src/test.ts", 83 | "polyfills": "src/polyfills.ts", 84 | "tsConfig": "tsconfig.spec.json", 85 | "karmaConfig": "karma.conf.js", 86 | "assets": [ 87 | "src/favicon.ico", 88 | "src/assets" 89 | ], 90 | "styles": [ 91 | "src/styles.scss" 92 | ], 93 | "scripts": [] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "tsconfig.app.json", 101 | "tsconfig.spec.json", 102 | "e2e/tsconfig.json" 103 | ], 104 | "exclude": [ 105 | "**/node_modules/**" 106 | ] 107 | } 108 | }, 109 | "e2e": { 110 | "builder": "@angular-devkit/build-angular:protractor", 111 | "options": { 112 | "protractorConfig": "e2e/protractor.conf.js", 113 | "devServerTarget": "angular-dynamic-forms:serve" 114 | }, 115 | "configurations": { 116 | "production": { 117 | "devServerTarget": "angular-dynamic-forms:serve:production" 118 | } 119 | } 120 | } 121 | } 122 | }}, 123 | "defaultProject": "angular-dynamic-forms" 124 | } 125 | --------------------------------------------------------------------------------