2 |
8 | You can use the following to login.
3 |-
4 |
- Email: demo@form.io 5 |
- Password: testing 6 |
Data Tables
2 |The data table is provided through the FormioGridModule, and provides you a way to easily embed a data table within your application with the following code.
<formio-grid src="https://examples.form.io/company"></formio-grid>
2 |
24 |
--------------------------------------------------------------------------------
/src/app/event/view/view.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formio/angular-demo/df0c2ce2f1930211db57092757a0fdd8a9fed35c/src/app/event/view/view.component.scss
--------------------------------------------------------------------------------
/src/app/event/view/view.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { ViewComponent } from './view.component';
4 |
5 | describe('ViewComponent', () => {
6 | let component: ViewComponent;
7 | let fixture: ComponentFixture
3 |
13 |
4 |
12 |
5 | {{ service.resource?.data.start | date }} to {{ service.resource?.data.end | date }}
6 |
7 |
8 |
11 | {{ service.resource?.data.title }}
9 | 10 |
14 |
23 |
15 |
22 |
16 |
18 | Registration
17 |
19 | Register Now
20 |
21 | You must to use the Form Manager.
2 | Dynamic JSON Form Builder
2 |The Form.io form builder interface allows you to embed a form builder within your application, which generates a JSON schema of the form created.
3 | 4 | builder.html 5 |<form-builder [form]="form" (change)="onChange($event)"></form-builder>import { Component, ElementRef, ViewChild } from '@angular/core';
8 | @Component({
9 | template: require('./builder.html')
10 | })
11 | export class BuilderComponent {
12 | @ViewChild('json') jsonElement?: ElementRef;
13 | public form: Object = {components: []};
14 | onChange(event) {
15 | console.log(event.form);
16 | }
17 | }20 |
As JSON Schema
21 |
22 |
24 | As Rendered Form
25 |
26 |
28 |
--------------------------------------------------------------------------------
/src/app/forms/builder/builder.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formio/angular-demo/df0c2ce2f1930211db57092757a0fdd8a9fed35c/src/app/forms/builder/builder.component.scss
--------------------------------------------------------------------------------
/src/app/forms/builder/builder.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { BuilderComponent } from './builder.component';
4 |
5 | describe('BuilderComponent', () => {
6 | let component: BuilderComponent;
7 | let fixture: ComponentFixture
2 |
43 |
3 |
42 | The Form.io form builder interface allows you to embed a form builder within your application, which generates a JSON schema of the form created.
4 | 5 |
6 | One of the features of builder that user can change different options.
7 | For example language. Options can be provided via [options] property.
8 |
10 |
12 | <form-builder [form]="form" [options]="options"></form-builder>Options can be look like:
13 |
14 |
27 | exprort const options = {
15 | language: 'en',
16 | i18n: {
17 | jp: {
18 | 'Label': 'ラベル',
19 | 'Label Position': 'ラベルの位置',
20 | 'Placeholder': 'プレースホルダー',
21 | 'Description': '説明文'
22 | }
23 | }
24 | }
25 | Also builder can be updated with the new options via
28 |
29 | [rebuild]
30 |
31 |
33 |
35 | <form-builder [form]="form" [options]="options" [rebuild]="rebuildEmitter.asObservable()"36 | Rebuid emitter can be Observable and used to set the new options like this: 37 |
38 |
39 |
41 | this.rebuildEmitter.next(this.options)
44 |
45 |
46 |
47 | 49 |
As JSON Schema
50 |
51 |
53 |
--------------------------------------------------------------------------------
/src/app/forms/custom-builder/builder.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
2 | import { PrismService } from '../../Prism.service';
3 | import { options } from './options';
4 | import {Observable, Subject} from "rxjs";
5 |
6 | @Component({
7 | selector: 'app-builder',
8 | templateUrl: './builder.component.html',
9 | })
10 | export class CustomBuilderComponent implements AfterViewInit {
11 | @ViewChild('json', {static: true}) jsonElement?: ElementRef;
12 | @ViewChild('code', {static: true}) codeElement?: ElementRef;
13 | public form: Object;
14 | public options: any;
15 | public language: string;
16 | public rebuildEmitter: Subject
2 |
13 |
--------------------------------------------------------------------------------
/src/app/forms/forms/forms.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formio/angular-demo/df0c2ce2f1930211db57092757a0fdd8a9fed35c/src/app/forms/forms/forms.component.scss
--------------------------------------------------------------------------------
/src/app/forms/forms/forms.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { FormsComponent } from './forms.component';
4 |
5 | describe('FormsComponent', () => {
6 | let component: FormsComponent;
7 | let fixture: ComponentFixture
3 |
8 |
9 |
10 |
12 | Good Morning Guys!!!
This is Content component.
Kitchen Sink Form
2 |Multiple Languages
2 | 3 |
4 |
5 |
6 |
7 |
8 | PDF Form
2 |
2 |
127 |
--------------------------------------------------------------------------------
/src/app/forms/renderer/renderer.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formio/angular-demo/df0c2ce2f1930211db57092757a0fdd8a9fed35c/src/app/forms/renderer/renderer.component.scss
--------------------------------------------------------------------------------
/src/app/forms/renderer/renderer.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { RendererComponent } from './renderer.component';
4 |
5 | describe('RendererComponent', () => {
6 | let component: RendererComponent;
7 | let fixture: ComponentFixture
3 |
84 | The Angular JSON form renderer is a wrapper around the Form.io Core Renderer. This provides the ability to render any Form within the Form.io platform, using the following syntax.
4 |
5 |
7 | <formio src="https://examples.com/example"></formio>You can also provide a variable as the source as follows.
8 |
9 |
11 | <formio [src]="formSrc"></formio>And even listen for Change and Submit events as follows.
12 |
13 |
19 | <formio
14 | [src]="formSrc"
15 | (change)="onChange($event)"
16 | (submit)="onSubmit($event)"
17 | ></formio>Or pass JSON directly
20 |
21 |
48 | <formio [form]="{components: [
22 | {
23 | type: 'textfield',
24 | label: 'FirstName',
25 | key: 'firstName',
26 | input: true
27 | },
28 | {
29 | type: 'textfield',
30 | label: 'LastName',
31 | key: 'lastName',
32 | input: true
33 | },
34 | {
35 | type: 'email',
36 | label: 'Email',
37 | key: 'email',
38 | input: true
39 | },
40 | {
41 | type: 'button',
42 | action: 'Submit',
43 | label: 'Submit',
44 | theme: 'primary'
45 | }
46 | ]}"></formio>and populate with data
49 |
50 |
83 | <formio [form]="{components: [
51 | {
52 | type: 'textfield',
53 | label: 'FirstName',
54 | key: 'firstName',
55 | input: true
56 | },
57 | {
58 | type: 'textfield',
59 | label: 'LastName',
60 | key: 'lastName',
61 | input: true
62 | },
63 | {
64 | type: 'email',
65 | label: 'Email',
66 | key: 'email',
67 | input: true
68 | },
69 | {
70 | type: 'button',
71 | action: 'submit',
72 | label: 'Submit',
73 | theme: 'primary'
74 | }
75 | ]}" [submission]="{
76 | data: {
77 | firstName: 'Joe',
78 | lastName: 'Smith',
79 | email: 'joe@example.com'
80 | }
81 | }"></formio>
85 |
86 |
126 |
87 |
125 |
88 |
124 | Result
89 |
90 |
123 | JSON Powered Forms
2 |Form.io is a platform for JSON powered forms within Angular. Forms can be embedded as easy as the following code.
3 | 4 |<formio src="https://examples.form.io/example"></formio>Wizard Forms
2 |Form.io provides a way to build multi-page forms and easily embed them within your application using the following code.
3 |<formio src="{{ config.appUrl }}/wizard"></formio>
2 | JavaScript Powered Forms for
3 |
10 | JavaScript Powered Forms for 
by 
3 | This library provides JavaScript powered forms for Angular. This allows you to render the JSON schema forms produced by Form.io and render those within your application using Angular 5, as well as provides an interface SDK to communicate to the Form.io API's. The benefits of this library include.
4 |-
5 |
- Renders a JSON schema as a webform and hooks up that form to the Form.io API's 6 |
- Nested components, layouts, Date/Time, Select, Input Masks, and many more included features 7 |
- Full JavaScript API SDK library on top of Form.io 8 |
11 |
18 |
12 |
17 | Example
13 |
14 |
16 | <formio src="{{ config.appUrl }}/example"></formio>
19 |
26 |
--------------------------------------------------------------------------------
/src/app/home/home.component.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formio/angular-demo/df0c2ce2f1930211db57092757a0fdd8a9fed35c/src/app/home/home.component.scss
--------------------------------------------------------------------------------
/src/app/home/home.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { HomeComponent } from './home.component';
4 |
5 | describe('HomeComponent', () => {
6 | let component: HomeComponent;
7 | let fixture: ComponentFixture
20 |
25 | Result
21 |
22 |
24 |