SVOGV Grid and Forms Library



Target Audience

This library is for Angular Version 2 or newer. The current release is for Angular 8 and matches the current Angular version usually.

The design / UI stuff is made using Bootstrap 4, and even here the current version is used.

It's for developers who create standard forms and want to automate the development process.

> Demo and project are made using Angular CLI. Current version is made using @angular/cli.

Introduction

This library is for making forms. Easy and fast. It has these advantages:

* All form parts are being created dynamically by using decorators. These control the UI and validation.
* All styles are based on Bootstrap 4, can be used together with themes and custom parts can be changed.
* A grid component makes data tables very easy to use.
* A tree view is another component.
* Dynamic editors and an autoform component creates the whole form without code.

What is it?

The approach was simply to improve the creation of forms as simple as ever in Angular. It's an extension to Angular that comes as a set of classes (injectable services) and components.

It's available as source code or as ready to use umd-bundle. The bundle is plane JavaScript. The sources are available via npm and from github.

> It's pretty small, too. It's 300 KB as a bundle and roughly 39 KB minified, close to 10 KB zipped.

Issues?

As of version 0.6 none known issues. Please report issues through Github.

Have you worked with the version 0.3 before? 0.6 has breaking changes because of a new build process.
In 0.7 I have again made significant changes towards the 1.0 release.
I'm using Angular CLI for all steps and sync the version with Angular (Angular 6 is SVGOV 0.6, Angular 7 is SVGOV 0.7, and so on). After the first final is being release I plan to jump the version to match the Angular major release. Hence, 0.6 is 6, 0.7 is 7 and if I could move to 1.0 and at that time Angular 9 is out, it will become SVOGV 9.

Angular Data Annotations

The idea of data annotations is somehow heavily inspired by the namespace System.ComponentModel.DataAnnotations of .NET Core. There is absolutely no dependency at all, though. You can find more here.

The basic idea is that we usually use view models anyway. So, why not using them to provide all information necessary to create a form that way?

$3

Let's assume you have a viewmodel like this:

~~~
export class UserViewModel {

@Hidden()
id: Number = 0;

@Display('E-Mail', 'E-Mail address')
@Required()
@MaxLength(100)
@Email()
email: string = '';

@Display('Phone Number', 'The user\'s phone')
@Required()
@MaxLength(20)
phoneNumber: string = '';

@Display('User Name', 'The full name')
@Required()
@MaxLength(100)
userName: string = '';

}
~~~

As you see there are several decorators. SVOGV has decorators for display hints, such as @Display. And it has decorators to manage the validation, such as @MaxLength().

The usage is simple; just import like this (selection, there are more options):

~~~
import {
Required,
MaxLength,
Range,
Email,
Display,
Hidden,
UiHint,
Format
} from 'svogv';
~~~

Or alternatively prefix your import:

~~~
import * as FormHints from 'svogv';

export class UserViewModel {

@FormHints.Display('E-Mail')
eMail: string = '';

}
~~~

$3

The form needs to be aware of the decorators. Hence, there is a service that creates an advanced FormGroup instance. It's called FormValidatorService. Internally it's using Angular's ReactiveFormsModule, so this is a dependency.

In a component's code it looks like this:

~~~
import { FormValidatorService } from 'svogv';

export class EditUserComponent implements OnInit {

myForm: FormGroup;

constructor(private fv: FormValidatorService) {
}

ngOnInit() {
// get validators and error messages from viewmodel type
this.myForm = this.fv.build(UserViewModel);
}
}
~~~

In this example UserViewModel is the decorated view model. It's just the type that the service requires, not an actual instance. However, the service will create an instance, and hence the model must be a class, not an interface. Also, all properties must be set, usually by setting defaults, because internally the properties are read by a for of loop.

Now the form knows all about the view model. Let's build a form on top on this:

~~~

The important part is the component . This component checks the property type, the decorators, and the form's settings and creates a complete form element in Bootstrap 4 style (the template is, of course, customizable). The connection between the service's outcome -- the FormGroup -- and the components is being made through setting the form group's instance (here myForm) using the input property formGroup.

And that's it. The form is pretty, has fully working validation, and is easy to access from your component. And yes, there is no additional code necessary to get it running.

$3

Even simpler, you can create a complete form with just one tag. Just go like this:

~~~

The only component here is that connects to the form using the attribute formGroup. Use binding syntax here as this is an object. The form is build upon Bootstrap 4 again and can be modified by several helper decorators.

#### Validation Decorators

| Decorator | Usage |
|-----------|-------|
|@StringLength| Set the strings minimum (optional) and maximum length. It's a summary of @MinLength and @MaxLength. |
|@MaxLength| The maximum length of a text input. |
|@MinLength| The minimum length of a text input. |
|@Pattern| A regular expression that is used to test the text or number input.|
|@Range| A range (from-to) for either numerical values or dates. |
|@Required| Makes the field mandatory. |
|@EMail| Checks input against a (very good) regular expression to test for valid e-mail pattern.|
|@Compare| Compares with another field, usually for password comparision.|

#### UI Decorators

| Decorator | Usage | ...Grid | ...Editor | ...Auto Form | ...Tree\\ |
|-----------|-------|-----------------|-------------------|----------------------|--|
|@Display| Determine the label's name and a tooltip ( optionally), You can also provide the fields' order.| Yes, Header row | Yes, label text | Yes, label text | No |
|@DisplayGroup| Groups components in