├── README.md ├── angular-5-formbuilder-master.zip ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── package-lock.json ├── package.json ├── readme.txt ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── edit-app │ │ ├── edit-app.component.css │ │ ├── edit-app.component.html │ │ ├── edit-app.component.spec.ts │ │ └── edit-app.component.ts │ └── global.model.ts ├── assets │ └── .gitkeep ├── browserslist ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /README.md: -------------------------------------------------------------------------------- 1 | # Formbuilder 2 | DEMO 3 | http://formbuilder.shakalya.com/ 4 | 5 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.1. 6 | 7 | ## Development server 8 | 9 | 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. 10 | 11 | ## Code scaffolding 12 | 13 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. 14 | 15 | ## Build 16 | 17 | 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. 18 | 19 | ## Running unit tests 20 | 21 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 22 | 23 | ## Running end-to-end tests 24 | 25 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 26 | 27 | ## Further help 28 | 29 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 30 | -------------------------------------------------------------------------------- /angular-5-formbuilder-master.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakalya195/angular-5-formbuilder/f41b44f90405f0ac0badb4ed15d4f65ae09d597d/angular-5-formbuilder-master.zip -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "formbuilder": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": {}, 12 | "architect": { 13 | "build": { 14 | "builder": "@angular-devkit/build-angular:browser", 15 | "options": { 16 | "outputPath": "dist/formbuilder", 17 | "index": "src/index.html", 18 | "main": "src/main.ts", 19 | "polyfills": "src/polyfills.ts", 20 | "tsConfig": "src/tsconfig.app.json", 21 | "assets": [ 22 | "src/favicon.ico", 23 | "src/assets" 24 | ], 25 | "styles": [ 26 | "node_modules/bootstrap/dist/css/bootstrap.min.css", 27 | "node_modules/sweetalert2/dist/sweetalert2.css", 28 | "node_modules/font-awesome/css/font-awesome.min.css", 29 | "src/styles.css" 30 | ], 31 | "scripts": [ 32 | "node_modules/bootstrap/dist/js/bootstrap.js" 33 | ] 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": "formbuilder:build" 66 | }, 67 | "configurations": { 68 | "production": { 69 | "browserTarget": "formbuilder:build:production" 70 | } 71 | } 72 | }, 73 | "extract-i18n": { 74 | "builder": "@angular-devkit/build-angular:extract-i18n", 75 | "options": { 76 | "browserTarget": "formbuilder: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": "src/tsconfig.spec.json", 85 | "karmaConfig": "src/karma.conf.js", 86 | "styles": [ 87 | "src/styles.css" 88 | ], 89 | "scripts": [], 90 | "assets": [ 91 | "src/favicon.ico", 92 | "src/assets" 93 | ] 94 | } 95 | }, 96 | "lint": { 97 | "builder": "@angular-devkit/build-angular:tslint", 98 | "options": { 99 | "tsConfig": [ 100 | "src/tsconfig.app.json", 101 | "src/tsconfig.spec.json" 102 | ], 103 | "exclude": [ 104 | "**/node_modules/**" 105 | ] 106 | } 107 | } 108 | } 109 | }, 110 | "formbuilder-e2e": { 111 | "root": "e2e/", 112 | "projectType": "application", 113 | "prefix": "", 114 | "architect": { 115 | "e2e": { 116 | "builder": "@angular-devkit/build-angular:protractor", 117 | "options": { 118 | "protractorConfig": "e2e/protractor.conf.js", 119 | "devServerTarget": "formbuilder:serve" 120 | }, 121 | "configurations": { 122 | "production": { 123 | "devServerTarget": "formbuilder:serve:production" 124 | } 125 | } 126 | }, 127 | "lint": { 128 | "builder": "@angular-devkit/build-angular:tslint", 129 | "options": { 130 | "tsConfig": "e2e/tsconfig.e2e.json", 131 | "exclude": [ 132 | "**/node_modules/**" 133 | ] 134 | } 135 | } 136 | } 137 | } 138 | }, 139 | "defaultProject": "formbuilder" 140 | } -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getTitleText()).toEqual('Welcome to formbuilder!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "formbuilder", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~7.1.0", 15 | "@angular/common": "~7.1.0", 16 | "@angular/compiler": "~7.1.0", 17 | "@angular/core": "~7.1.0", 18 | "@angular/forms": "~7.1.0", 19 | "@angular/platform-browser": "~7.1.0", 20 | "@angular/platform-browser-dynamic": "~7.1.0", 21 | "@angular/router": "~7.1.0", 22 | "@toverux/ngx-sweetalert2": "3.3.1", 23 | "bootstrap": "^4.1.3", 24 | "core-js": "^2.5.4", 25 | "font-awesome": "^4.7.0", 26 | "ngx-drag-drop": "^1.1.0", 27 | "rxjs": "~6.3.3", 28 | "sweetalert2": "^7.19.3", 29 | "tslib": "^1.9.0", 30 | "zone.js": "~0.8.26" 31 | }, 32 | "devDependencies": { 33 | "@angular-devkit/build-angular": "~0.11.0", 34 | "@angular/cli": "~7.1.1", 35 | "@angular/compiler-cli": "~7.1.0", 36 | "@angular/language-service": "~7.1.0", 37 | "@types/node": "~8.9.4", 38 | "@types/jasmine": "~2.8.8", 39 | "@types/jasminewd2": "~2.0.3", 40 | "codelyzer": "~4.5.0", 41 | "jasmine-core": "~2.99.1", 42 | "jasmine-spec-reporter": "~4.2.1", 43 | "karma": "~3.1.1", 44 | "karma-chrome-launcher": "~2.2.0", 45 | "karma-coverage-istanbul-reporter": "~2.0.1", 46 | "karma-jasmine": "~1.1.2", 47 | "karma-jasmine-html-reporter": "^0.2.2", 48 | "protractor": "~5.4.0", 49 | "ts-node": "~7.0.0", 50 | "tslint": "~5.11.0", 51 | "typescript": "~3.1.6" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | formbuilder 2 | -------------------------------------------------------------------------------- /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/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakalya195/angular-5-formbuilder/f41b44f90405f0ac0badb4ed15d4f65ae09d597d/src/app/app.component.css -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Formbuilder

4 |
5 |
6 |
7 | 8 |
9 | -------------------------------------------------------------------------------- /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 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'formbuilder'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('formbuilder'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to formbuilder!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'formbuilder'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { RouterModule, Routes, ActivatedRoute, ActivatedRouteSnapshot} from '@angular/router'; 5 | import { AppRoutingModule } from './app-routing.module'; 6 | import { AppComponent } from './app.component'; 7 | import { EditAppComponent } from './edit-app/edit-app.component'; 8 | import { DndModule } from 'ngx-drag-drop'; 9 | import { SweetAlert2Module } from '@toverux/ngx-sweetalert2'; 10 | 11 | const appRoutes: Routes = [ 12 | { path: '', component: EditAppComponent }, 13 | ]; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | AppComponent, 18 | EditAppComponent 19 | ], 20 | imports: [ 21 | RouterModule.forRoot(appRoutes), 22 | SweetAlert2Module.forRoot(), 23 | BrowserModule, 24 | FormsModule, 25 | AppRoutingModule, 26 | DndModule, 27 | ], 28 | providers: [], 29 | bootstrap: [AppComponent] 30 | }) 31 | export class AppModule { } 32 | -------------------------------------------------------------------------------- /src/app/edit-app/edit-app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakalya195/angular-5-formbuilder/f41b44f90405f0ac0badb4ed15d4f65ae09d597d/src/app/edit-app/edit-app.component.css -------------------------------------------------------------------------------- /src/app/edit-app/edit-app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 | 8 |
9 |
10 |
11 |
12 |
13 |
14 | 15 |
16 | 17 | 18 |
19 |
20 | 21 | 22 |
23 | 24 |

Select Fields

25 |

Customize your form by drag and drop below fields to the form area.

26 | 27 |
28 |
31 | 32 |
{{item.label}}
33 |
34 |
35 | 36 |
37 |
38 | 39 |
43 |

44 | 45 |
46 | 47 | 48 | 49 |
55 | 56 |
62 |
63 |
64 |
65 | 68 |
69 | 70 | 71 |
72 |
73 | 74 | 75 |
76 |
77 | 78 | 79 |
80 |
81 | 82 | 83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 | 91 |
92 |
93 | 94 | 96 |
97 |
98 | 99 | 100 | (File can't be uploaded right now) 101 |
102 |
103 |

{{item.placeholder}}

104 |
105 |
106 | 107 | 110 | 111 |
112 |
113 | 114 |
115 | 119 |
120 |
121 |
122 | 123 |
124 | 128 |
129 |
130 |
131 | 132 |
133 |
134 |
135 | 136 | 137 | 138 |
139 |
140 |
141 |
142 | 143 | 144 | 145 | {{item.type}} 146 |
147 |
148 | 149 | 150 |
151 |
152 | 153 | 154 |
155 |
156 | 157 | 158 |
159 |
160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 | 168 | 169 |
170 |
171 |
172 | 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 |
181 |
182 |
183 | 184 | 185 |
186 |
187 |
188 |
189 | 190 |
191 |
192 |
193 |
194 | 195 |
196 |
197 |
198 |
199 | 200 |
201 |
202 |
203 |
204 |
205 |
206 | 207 |
208 |
209 |
210 |
211 | 212 |
213 |
214 |
215 |
216 | 217 |
218 |
219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 |
227 |
228 | 229 |
230 |
231 |
232 |
233 | 234 |
235 |
236 |
237 |
238 | 239 | 240 | 241 | 242 |
243 |
244 | 245 | 246 |
247 |
248 |
249 | 250 |
251 |
252 |
253 | 254 | 255 | 256 |
257 |
258 |
259 | 260 |
261 |
262 | 263 |
264 |
265 |
266 |
267 |
{{record.label}}
268 |
{{record.value}}
269 |
270 |
271 |
272 | 273 |
274 | 275 |
276 | No response found 277 |
278 | 279 |
280 | 281 |
282 | 283 | 284 | 285 | 286 |
290 | 291 |
295 |
296 |

{{model.name}}

297 |
298 |
299 |

{{model.description}}

300 |
301 |
302 |
303 | 304 |
305 |
306 |
307 |
308 |
309 |
310 | 311 | 312 |
313 |
314 | 315 | 316 |
317 |
318 | 319 | 320 |
321 |
322 | 323 | 324 |
325 |
326 | 327 | 328 |
329 |
330 | 331 | 332 |
333 |
334 | 335 | 337 |
338 |
339 | 340 | 341 | (File can't be uploaded right now) 342 |
343 |
344 |

{{item.placeholder}}

345 |
346 |
347 | 348 | 351 | 352 |
353 |
354 | 355 |
356 | 360 |
361 |
362 |
363 | 364 |
365 | 369 |
370 |
371 |
372 | 373 |
374 |
375 | 376 |

Show developer data

377 | 378 |
379 |
380 |
381 |
382 | 383 | 
384 |     {{model|json}}
385 |
386 | -------------------------------------------------------------------------------- /src/app/edit-app/edit-app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { EditAppComponent } from './edit-app.component'; 4 | 5 | describe('EditAppComponent', () => { 6 | let component: EditAppComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ EditAppComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(EditAppComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should be created', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/edit-app/edit-app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { DndDropEvent,DropEffect} from 'ngx-drag-drop'; 3 | import { field, value } from '../global.model'; 4 | import { ActivatedRoute } from '@angular/router'; 5 | import swal from 'sweetalert2'; 6 | 7 | @Component({ 8 | selector: 'app-edit-app', 9 | templateUrl: './edit-app.component.html', 10 | styleUrls: ['./edit-app.component.css'] 11 | }) 12 | export class EditAppComponent implements OnInit { 13 | 14 | value:value={ 15 | label:"", 16 | value:"" 17 | }; 18 | success = false; 19 | 20 | fieldModels:Array=[ 21 | { 22 | "type": "text", 23 | "icon": "fa-font", 24 | "label": "Text", 25 | "description": "Enter your name", 26 | "placeholder": "Enter your name", 27 | "className": "form-control", 28 | "subtype": "text", 29 | "regex" : "", 30 | "handle":true 31 | }, 32 | { 33 | "type": "email", 34 | "icon": "fa-envelope", 35 | "required": true, 36 | "label": "Email", 37 | "description": "Enter your email", 38 | "placeholder": "Enter your email", 39 | "className": "form-control", 40 | "subtype": "text", 41 | "regex" : "^([a-zA-Z0-9_.-]+)@([a-zA-Z0-9_.-]+)\.([a-zA-Z]{2,5})$", 42 | "errorText": "Please enter a valid email", 43 | "handle":true 44 | }, 45 | { 46 | "type": "phone", 47 | "icon": "fa-phone", 48 | "label": "Phone", 49 | "description": "Enter your phone", 50 | "placeholder": "Enter your phone", 51 | "className": "form-control", 52 | "subtype": "text", 53 | "regex" : "^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$", 54 | "errorText": "Please enter a valid phone number", 55 | "handle":true 56 | }, 57 | { 58 | "type": "number", 59 | "label": "Number", 60 | "icon": "fa-html5", 61 | "description": "Age", 62 | "placeholder": "Enter your age", 63 | "className": "form-control", 64 | "value": "20", 65 | "min": 12, 66 | "max": 90 67 | }, 68 | { 69 | "type": "date", 70 | "icon":"fa-calendar", 71 | "label": "Date", 72 | "placeholder": "Date", 73 | "className": "form-control" 74 | }, 75 | { 76 | "type": "datetime-local", 77 | "icon":"fa-calendar", 78 | "label": "DateTime", 79 | "placeholder": "Date Time", 80 | "className": "form-control" 81 | }, 82 | { 83 | "type": "textarea", 84 | "icon":"fa-text-width", 85 | "label": "Textarea" 86 | }, 87 | { 88 | "type": "paragraph", 89 | "icon": "fa-paragraph", 90 | "label": "Paragraph", 91 | "placeholder": "Type your text to display here only" 92 | }, 93 | { 94 | "type": "checkbox", 95 | "required": true, 96 | "label": "Checkbox", 97 | "icon":"fa-list", 98 | "description": "Checkbox", 99 | "inline": true, 100 | "values": [ 101 | { 102 | "label": "Option 1", 103 | "value": "option-1" 104 | }, 105 | { 106 | "label": "Option 2", 107 | "value": "option-2" 108 | } 109 | ] 110 | }, 111 | { 112 | "type": "radio", 113 | "icon":"fa-list-ul", 114 | "label": "Radio", 115 | "description": "Radio boxes", 116 | "values": [ 117 | { 118 | "label": "Option 1", 119 | "value": "option-1" 120 | }, 121 | { 122 | "label": "Option 2", 123 | "value": "option-2" 124 | } 125 | ] 126 | }, 127 | { 128 | "type": "autocomplete", 129 | "icon":"fa-bars", 130 | "label": "Select", 131 | "description": "Select", 132 | "placeholder": "Select", 133 | "className": "form-control", 134 | "values": [ 135 | { 136 | "label": "Option 1", 137 | "value": "option-1" 138 | }, 139 | { 140 | "label": "Option 2", 141 | "value": "option-2" 142 | }, 143 | { 144 | "label": "Option 3", 145 | "value": "option-3" 146 | } 147 | ] 148 | }, 149 | { 150 | "type": "file", 151 | "icon":"fa-file", 152 | "label": "File Upload", 153 | "className": "form-control", 154 | "subtype": "file" 155 | }, 156 | { 157 | "type": "button", 158 | "icon":"fa-paper-plane", 159 | "subtype": "submit", 160 | "label": "Submit" 161 | } 162 | ]; 163 | 164 | modelFields:Array=[]; 165 | model:any = { 166 | name:'App name...', 167 | description:'App Description...', 168 | theme:{ 169 | bgColor:"ffffff", 170 | textColor:"555555", 171 | bannerImage:"" 172 | }, 173 | attributes:this.modelFields 174 | }; 175 | 176 | report = false; 177 | reports:any = []; 178 | 179 | constructor( 180 | private route:ActivatedRoute 181 | ) { } 182 | 183 | ngOnInit() { 184 | // this.route.params.subscribe( params =>{ 185 | // console.log(params); 186 | // this.us.getDataApi('/admin/getFormById',{id:params.id}).subscribe(r=>{ 187 | // console.log(r); 188 | // this.model = r['data']; 189 | // }); 190 | // }); 191 | 192 | 193 | // this.model = this.cs.data; 194 | // console.log(this.model.data); 195 | 196 | } 197 | 198 | onDragStart(event:DragEvent) { 199 | console.log("drag started", JSON.stringify(event, null, 2)); 200 | } 201 | 202 | onDragEnd(event:DragEvent) { 203 | console.log("drag ended", JSON.stringify(event, null, 2)); 204 | } 205 | 206 | onDraggableCopied(event:DragEvent) { 207 | console.log("draggable copied", JSON.stringify(event, null, 2)); 208 | } 209 | 210 | onDraggableLinked(event:DragEvent) { 211 | console.log("draggable linked", JSON.stringify(event, null, 2)); 212 | } 213 | 214 | onDragged( item:any, list:any[], effect:DropEffect ) { 215 | if( effect === "move" ) { 216 | const index = list.indexOf( item ); 217 | list.splice( index, 1 ); 218 | } 219 | } 220 | 221 | onDragCanceled(event:DragEvent) { 222 | console.log("drag cancelled", JSON.stringify(event, null, 2)); 223 | } 224 | 225 | onDragover(event:DragEvent) { 226 | console.log("dragover", JSON.stringify(event, null, 2)); 227 | } 228 | 229 | onDrop( event:DndDropEvent, list?:any[] ) { 230 | if( list && (event.dropEffect === "copy" || event.dropEffect === "move") ) { 231 | 232 | if(event.dropEffect === "copy") 233 | event.data.name = event.data.type+'-'+new Date().getTime(); 234 | let index = event.index; 235 | if( typeof index === "undefined" ) { 236 | index = list.length; 237 | } 238 | list.splice( index, 0, event.data ); 239 | } 240 | } 241 | 242 | addValue(values){ 243 | values.push(this.value); 244 | this.value={label:"",value:""}; 245 | } 246 | 247 | removeField(i){ 248 | swal({ 249 | title: 'Are you sure?', 250 | text: "Do you want to remove this field?", 251 | type: 'warning', 252 | showCancelButton: true, 253 | confirmButtonColor: '#00B96F', 254 | cancelButtonColor: '#d33', 255 | confirmButtonText: 'Yes, remove!' 256 | }).then((result) => { 257 | if (result.value) { 258 | this.model.attributes.splice(i,1); 259 | } 260 | }); 261 | 262 | } 263 | 264 | updateForm(){ 265 | let input = new FormData; 266 | input.append('id',this.model._id); 267 | input.append('name',this.model.name); 268 | input.append('description',this.model.description); 269 | input.append('bannerImage',this.model.theme.bannerImage); 270 | input.append('bgColor',this.model.theme.bgColor); 271 | input.append('textColor',this.model.theme.textColor); 272 | input.append('attributes',JSON.stringify(this.model.attributes)); 273 | 274 | // this.us.putDataApi('/admin/updateForm',input).subscribe(r=>{ 275 | // console.log(r); 276 | // swal('Success','App updated successfully','success'); 277 | // }); 278 | } 279 | 280 | 281 | initReport(){ 282 | this.report = true; 283 | let input = { 284 | id:this.model._id 285 | } 286 | // this.us.getDataApi('/admin/allFilledForms',input).subscribe(r=>{ 287 | // this.reports = r.data; 288 | // console.log('reports',this.reports); 289 | // this.reports.map(records=>{ 290 | // return records.attributes.map(record=>{ 291 | // if(record.type=='checkbox'){ 292 | // record.value = record.values.filter(r=>r.selected).map(i=>i.value).join(','); 293 | // } 294 | // }) 295 | // }); 296 | // }); 297 | } 298 | 299 | 300 | 301 | toggleValue(item){ 302 | item.selected = !item.selected; 303 | } 304 | 305 | submit(){ 306 | let valid = true; 307 | let validationArray = JSON.parse(JSON.stringify(this.model.attributes)); 308 | validationArray.reverse().forEach(field => { 309 | console.log(field.label+'=>'+field.required+"=>"+field.value); 310 | if(field.required && !field.value && field.type != 'checkbox'){ 311 | swal('Error','Please enter '+field.label,'error'); 312 | valid = false; 313 | return false; 314 | } 315 | if(field.required && field.regex){ 316 | let regex = new RegExp(field.regex); 317 | if(regex.test(field.value) == false){ 318 | swal('Error',field.errorText,'error'); 319 | valid = false; 320 | return false; 321 | } 322 | } 323 | if(field.required && field.type == 'checkbox'){ 324 | if(field.values.filter(r=>r.selected).length == 0){ 325 | swal('Error','Please enterrr '+field.label,'error'); 326 | valid = false; 327 | return false; 328 | } 329 | 330 | } 331 | }); 332 | if(!valid){ 333 | return false; 334 | } 335 | console.log('Save',this.model); 336 | let input = new FormData; 337 | input.append('formId',this.model._id); 338 | input.append('attributes',JSON.stringify(this.model.attributes)) 339 | // this.us.postDataApi('/user/formFill',input).subscribe(r=>{ 340 | // console.log(r); 341 | // swal('Success','You have contact sucessfully','success'); 342 | // this.success = true; 343 | // },error=>{ 344 | // swal('Error',error.message,'error'); 345 | // }); 346 | } 347 | 348 | } 349 | -------------------------------------------------------------------------------- /src/app/global.model.ts: -------------------------------------------------------------------------------- 1 | export class field{ 2 | _id?:any; 3 | name?:any; 4 | type?:any; 5 | icon?:any; 6 | toggle?:any; 7 | required?:any; 8 | regex?:any; 9 | errorText?:any; 10 | label?:any; 11 | description?:any; 12 | placeholder?:any; 13 | className?:any; 14 | subtype?:any; 15 | handle?:any; 16 | min?:number; 17 | max?:number; 18 | inline?:any; 19 | value?:any; 20 | values?:Array; 21 | } 22 | 23 | export class value{ 24 | label?:any=""; 25 | value?:any=""; 26 | } 27 | 28 | export interface IProperty { 29 | url?: string; 30 | loading?: boolean; 31 | itemsPerPage?: number; 32 | total?: number; 33 | p?: number; 34 | sizeLimit?: number; 35 | title?: string; 36 | text?: string; 37 | items?: any[]; 38 | sub?: any; 39 | isBlocked?: boolean; 40 | isDeleted?: boolean; 41 | isEmailVerified?: string; 42 | successMsg?: string; 43 | msg?: string; 44 | userId?: string; 45 | status?: number; 46 | userPlaceholder?: string; 47 | searchKey?: string; 48 | fullName?: string; 49 | email?: string; 50 | countryCode?: string; 51 | dialCode?: string; 52 | phoneNumber?: string; 53 | value?: Date; 54 | data?: any; 55 | name_es?: string; 56 | name_en?: string; 57 | countries?: any; 58 | states?: any; 59 | cities?: any; 60 | countries1?: any; 61 | states1?: any; 62 | cities1?: any; 63 | countries2?: any; 64 | states2?: any; 65 | cities2?: any; 66 | localities?: any; 67 | buildings?: any; 68 | country_id?: string; 69 | state_id?: string; 70 | city_id?: string; 71 | locality_id?: string; 72 | building_id?: string; 73 | countryCount?: number; 74 | stateCount?: number; 75 | cityCount?: number; 76 | stateCityCount?: number; 77 | localityCount?: number; 78 | buildingCount?: number; 79 | countriesAdd?: any; 80 | statesAdd?: any; 81 | citiesAdd?: any; 82 | localitiesAdd?: any; 83 | country_idAdd?: string; 84 | state_idAdd?: string; 85 | city_idAdd?: string; 86 | locality_idAdd?: string; 87 | countryCountAdd?: number; 88 | stateCountAdd?: number; 89 | cityCountAdd?: number; 90 | localityCountAdd?: number; 91 | successText?: string; 92 | propertyTypes?: any; 93 | propertyTypesCount?: number; 94 | amenities?: any; 95 | amenitiesCount?: number; 96 | projectTypes?: any; 97 | projectTypesCount?: number; 98 | routeName?: string; 99 | icon?: any; 100 | userType?: string; 101 | overlay?: any; 102 | is_broker_seller_dev?: number; 103 | is_buyer_renter?: number; 104 | is_broker?: number; 105 | is_data_collector?: number; 106 | image?: any; 107 | index?: number; 108 | name?: string; 109 | phone?: string; 110 | type?: number; 111 | property_id?: string; 112 | banks?: any; 113 | bankCount?: string; 114 | flag?: number; 115 | page?: number; 116 | property_for?: any; 117 | status_id?:any; 118 | type_id?:any; 119 | post_type?:any; 120 | developer_id?:any; 121 | } 122 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakalya195/angular-5-formbuilder/f41b44f90405f0ac0badb4ed15d4f65ae09d597d/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed 6 | 7 | > 0.5% 8 | last 2 versions 9 | Firefox ESR 10 | not dead 11 | not IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shakalya195/angular-5-formbuilder/f41b44f90405f0ac0badb4ed15d4f65ae09d597d/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Formbuilder 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/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'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /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/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 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** 38 | * If the application will be indexed by Google Search, the following is required. 39 | * Googlebot uses a renderer based on Chrome 41. 40 | * https://developers.google.com/search/docs/guides/rendering 41 | **/ 42 | // import 'core-js/es6/array'; 43 | 44 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 45 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 46 | 47 | /** IE10 and IE11 requires the following for the Reflect API. */ 48 | // import 'core-js/es6/reflect'; 49 | 50 | /** 51 | * Web Animations `@angular/platform-browser/animations` 52 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 53 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 54 | **/ 55 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 56 | 57 | /** 58 | * By default, zone.js will patch all possible macroTask and DomEvents 59 | * user can disable parts of macroTask/DomEvents patch by setting following flags 60 | */ 61 | 62 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 63 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 64 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 65 | 66 | /* 67 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 68 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 69 | */ 70 | // (window as any).__Zone_enable_cross_context_check = true; 71 | 72 | /*************************************************************************************************** 73 | * Zone JS is required by default for Angular itself. 74 | */ 75 | import 'zone.js/dist/zone'; // Included with Angular CLI. 76 | 77 | 78 | /*************************************************************************************************** 79 | * APPLICATION IMPORTS 80 | */ 81 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | /* You can add global styles to this file, and also import other style files */ 3 | 4 | .clearfix{clear:both;} 5 | .pointer{cursor: pointer;} 6 | .ucfirst{text-transform: capitalize;} 7 | .min300{min-height:300px} 8 | .app-box{ 9 | padding: 10px; 10 | margin-bottom:20px; 11 | height: 230px; 12 | background: #b5e8d4; 13 | overflow: hidden; 14 | box-shadow: 1px 1px 4px #ccc; 15 | } 16 | .app-box:hover{ 17 | box-shadow: 1px 1px 4px #999; 18 | } 19 | .app-box .remove{ 20 | position: absolute; 21 | right: 21px; 22 | top: 0px; 23 | color: #545454; 24 | display:none; 25 | } 26 | .app-box:hover .remove{ 27 | display:block; 28 | } 29 | .inline-btn{ 30 | background: #00b970; 31 | padding: 1px 5px; 32 | color: white; 33 | display: inline-block; 34 | margin-bottom: 5px; 35 | } 36 | .box{ 37 | padding: 10px; 38 | margin-bottom:10px; 39 | overflow: auto; 40 | box-shadow: 1px 1px 4px #ddd; 41 | } 42 | .form-group .form-control{ 43 | font-size:inherit; 44 | background-color: inherit; 45 | } 46 | 47 | .dndDropArea{ 48 | padding: 10px; 49 | /* border: dotted #ddd 2px; */ 50 | } 51 | 52 | .dndDropArea.empty{ 53 | min-height:200px; 54 | border: dotted #ddd 2px; 55 | } 56 | 57 | .field{ 58 | padding:5px; 59 | margin-bottom:10px; 60 | position: relative; 61 | } 62 | .field:hover{ 63 | box-shadow: 1px 1px 4px #ddd; 64 | } 65 | .toggle-Wrapper{ 66 | padding: 15px; 67 | background: #d6d6d629; 68 | } 69 | .dndHandle{ 70 | cursor: pointer; 71 | color: #999; 72 | } 73 | .dndDraggingSource{ 74 | opacity:0.3; 75 | } 76 | .dndPlaceholder{ 77 | background: rgb(206, 238, 238); border-radius: 2px; padding: 20px; 78 | margin-bottom:10px; 79 | } 80 | .field .fa{ 81 | width: 30px; 82 | height: 30px; 83 | text-align: center; 84 | font-size: 24px; 85 | vertical-align: middle; 86 | 87 | } 88 | .red{color:#d9534f} 89 | .fa-trash{color:#d9534f} 90 | .marginT60{ 91 | margin-top:60px; 92 | } 93 | 94 | .color-red{color:red;} 95 | .report-block{ 96 | padding:10px; 97 | background:#f8f8f8; 98 | margin-bottom:20px; 99 | } 100 | .report-block .row:nth-child(even){ 101 | background:#fff; 102 | } 103 | 104 | .ftheme{ 105 | width:100%; 106 | } 107 | 108 | .dndDropArea .field .fa{ 109 | opacity:0; 110 | } 111 | .dndDropArea .field:hover .fa{ 112 | opacity:1; 113 | } 114 | 115 | .colorpick{ 116 | height: 25px; 117 | background: white; 118 | border: none; 119 | } -------------------------------------------------------------------------------- /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/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "types": [] 6 | }, 7 | "exclude": [ 8 | "test.ts", 9 | "**/*.spec.ts" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /src/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 | "test.ts", 12 | "polyfills.ts" 13 | ], 14 | "include": [ 15 | "**/*.spec.ts", 16 | "**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "es2015", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "deprecation": { 15 | "severity": "warn" 16 | }, 17 | "eofline": true, 18 | "forin": true, 19 | "import-blacklist": [ 20 | true, 21 | "rxjs/Rx" 22 | ], 23 | "import-spacing": true, 24 | "indent": [ 25 | true, 26 | "spaces" 27 | ], 28 | "interface-over-type-literal": true, 29 | "label-position": true, 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-arg": true, 47 | "no-bitwise": true, 48 | "no-console": [ 49 | true, 50 | "debug", 51 | "info", 52 | "time", 53 | "timeEnd", 54 | "trace" 55 | ], 56 | "no-construct": true, 57 | "no-debugger": true, 58 | "no-duplicate-super": true, 59 | "no-empty": false, 60 | "no-empty-interface": true, 61 | "no-eval": true, 62 | "no-inferrable-types": [ 63 | true, 64 | "ignore-params" 65 | ], 66 | "no-misused-new": true, 67 | "no-non-null-assertion": true, 68 | "no-redundant-jsdoc": true, 69 | "no-shadowed-variable": true, 70 | "no-string-literal": false, 71 | "no-string-throw": true, 72 | "no-switch-case-fall-through": true, 73 | "no-trailing-whitespace": true, 74 | "no-unnecessary-initializer": true, 75 | "no-unused-expression": true, 76 | "no-use-before-declare": true, 77 | "no-var-keyword": true, 78 | "object-literal-sort-keys": false, 79 | "one-line": [ 80 | true, 81 | "check-open-brace", 82 | "check-catch", 83 | "check-else", 84 | "check-whitespace" 85 | ], 86 | "prefer-const": true, 87 | "quotemark": [ 88 | true, 89 | "single" 90 | ], 91 | "radix": true, 92 | "semicolon": [ 93 | true, 94 | "always" 95 | ], 96 | "triple-equals": [ 97 | true, 98 | "allow-null-check" 99 | ], 100 | "typedef-whitespace": [ 101 | true, 102 | { 103 | "call-signature": "nospace", 104 | "index-signature": "nospace", 105 | "parameter": "nospace", 106 | "property-declaration": "nospace", 107 | "variable-declaration": "nospace" 108 | } 109 | ], 110 | "unified-signatures": true, 111 | "variable-name": false, 112 | "whitespace": [ 113 | true, 114 | "check-branch", 115 | "check-decl", 116 | "check-operator", 117 | "check-separator", 118 | "check-type" 119 | ], 120 | "no-output-on-prefix": true, 121 | "use-input-property-decorator": true, 122 | "use-output-property-decorator": true, 123 | "use-host-property-decorator": true, 124 | "no-input-rename": true, 125 | "no-output-rename": true, 126 | "use-life-cycle-interface": true, 127 | "use-pipe-transform-interface": true, 128 | "component-class-suffix": true, 129 | "directive-class-suffix": true 130 | } 131 | } 132 | --------------------------------------------------------------------------------