Testing and Developing Your Form Component
For testing purposes, your multiple-projects workspace comes with an automatically generated test application along with one Angular component.
Expert Advice
For detailed information about multi-project workspaces, visit the Angular documentation.
Test Application Features
All mentioned files reside in folder <name of the library>/projects/<name of the application>/src/app.
File | Description |
---|---|
form-test-wrapper.component.html | Contains the <pas-child-form> element. This element is part of the @pas/app-core module and is also used by the Designer to show subform elements. With this element, you can test your Designer integration as close as possible. The <pas-child-form> element is preadjusted to use events in order to read the form's data. To test that, add text to the input field, open your browser console and click the submit button (see Starting the Test Application below). form-test-wrapper.component.html <pas-child-form [form]="form" (formEvent)="onFormEvent($event)" [formGroup]="reactiveForm" [data]="formData"></pas-child-form> |
form-test-wrapper.component.ts | Contains an import of your form component from your library's public-api.ts file and a form variable which allows you to use your component MyFormComponent in the <pas-child-form> element. form-test-wrapper.component.ts import { Component, Input, OnInit, Type } from '@angular/core'; import {AbstractFormComponent, FormEvent} from "@pas/app-core"; import { FormGroup } from '@angular/forms'; import {MyFormComponent} from "../../../../my-lib/src/public-api"; @Component({ selector: 'app-form-test-wrapper', templateUrl: './form-test-wrapper.component.html', styleUrls: ['./form-test-wrapper.component.scss'] }) export class FormTestWrapperComponent implements OnInit { public form: Type<AbstractFormComponent> = MyFormComponent; constructor() { } ngOnInit(): void { } @Input() public reactiveForm: FormGroup = new FormGroup({}); public formData: any = {}; async onFormEvent(event: FormEvent) { console.log(this.reactiveForm.value); } } |
app.module.ts | Contains an import of @pas/app-core module which makes the <pas-child-form> element accessible. app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { FormTestWrapperComponent } from './form-test-wrapper/form-test-wrapper.component'; import {AppCoreModule} from "@pas/app-core"; @NgModule({ declarations: [ AppComponent, FormTestWrapperComponent ], imports: [ BrowserModule, AppRoutingModule, AppCoreModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
app.component.html | Contains the selector of your form-test.wrapper.component to make your component appear. app.component.html <app-form-test-wrapper></app-form-test-wrapper> You can find how your HTML element is called in the .ts file of your generated form-test-wrapper component. It is the selector entry in the @Component decorator.
|
Starting the Test Application
To start your test application, use:
ng serve my-form-test --configuration development
This outputs
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Open the mentioned URL http://localhost:4200/ in your browser and you will see the following screen: | |
Enter some text in the input field in your form. Open the developer console of your browser and click Submit. The entered text will be displayed in the console. Now you can continue extending your form with individual elements and test them in the Designer. |
Using External Libraries
If you want to use external libraries in your Pro-Code forms, you need to add the external library to your own library project.
Path | Step | Description | Example Code |
---|---|---|---|
my-lib/projects/my-lib | 1 | Go to my-lib/projects/my-lib and execute the install command for the external library. | npm install ng2-pdfjs-viewer --save |
2 | Adjust the ng-package.json in the library folder to make the external library available for your applications. | "allowedNonPeerDependencies":[ "@pas/xuml-library-devkit", "ng2-pdf-viewer"] |