Lysis Angular form validator generator

Overview

This generator creates Angular validators from the backend, to ease forms creation.

Basic usage

$3

In a controller, to validate form input for books:

``
import { Component, OnInit } from '@angular/core';

import { BooksService } from '../backend/services';
import { Book } from '../backend/classes';
import { FormService, Form } from '../backend/forms';

@Component({
selector: 'app-books-list',
templateUrl: './books-list.component.html',
styleUrls: ['./books-list.component.css']
})

export class BooksListComponent implements OnInit {
books: Array = [];
form: Form;

constructor(
private booksService : BooksService,
formService: FormService
) {}

ngOnInit() {
this.booksService.getAll().subscribe(books => {
this.books = books;
});
// initialize the form with a whole new book
this.createNewBook();
}

createNewBook(): void {
this.form = this.formService.makeForm(new Book());
}

// used in the template, for example in a data table
selectBook(book: Book): void {
this.form = this.formService.makeForm(book);
}

// create or update the book
commitBook(): void {
if (this.form.group.dirty && this.form.group.valid) {
var newBook = this.form.get();
if (newBook.id) {
this.booksService.update(newBook).subscribe(book => console.log('yeah!'));
} else {
this.booksService.add(newBook).subscribe(book => console.log('yeah!'));
}
} else {
// force invalid inputs state to display errors
this.form.displayErrors();
}
}
}
`

Note: it works well with services generated by Lysis Restangular services generator and classes from Lysis TypeScript classes generator .

$3

The associated template takes advantage of Angular form groups to display values in form fields and to handle validation:

`






[...]
Apply



`

Use

$3

If it is not already done, install api-lysis globally and as dev dependency:

`
npm install api-lysis -g
npm install api-lysis --save-dev
`

### Install this generator

Install this generator:

`
npm install lysis-angular-form-validators-generator --save-dev
`

$3

Configuration sample:

`
apis:
http://localhost:8000:
basePath: 'my-backend'
hydraPrefix: 'hydra:'
generators:
lysis-angular-form-validators-generator:
dir: 'forms'
classPath: '../classes'
`

Services files are generated in my-backend/forms.

If dir is not set, the default value is form-validators.

classPath is the path to class files. By default it is set to ../backend-classes.




$3

As the form service provided by this generator uses Angular reactive forms and ng2-validation, it must be installed:

npm install ng2-validation --save

It should be enabled in app.module.ts, as well as FormService:

`
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormService } from './my-backend/form-validators';
[...]
@NgModule({
imports: [
[...]
ReactiveFormsModule,
[...]
],
providers: [
[...]
FormService,
[...]
]
})
`

$3

Start Lysis, without writing files:

lysis --dry-run

Start Lysis:

lysis

Customize form validators

A validators set is created for each resource.

Example of validators set to check books, in the generated file BookValidatorsBase.ts:

`
export class BookValidatorsBase extends FormGroupValidators {
id = [CustomValidators.digits];
isbn = null;
description = [Validators.required];
author = [Validators.required];
title = [Validators.required];
publicationDate = [Validators.required, CustomValidators.date];
}
`

Built-in validators and validators from ng2-validation.

This file is updated each time you start Lysis, then it should not be modified.

$3

For example, to change author max length, edit the BookValidators.ts file:

`
export class BookValidators extends BookValidatorsBase {
author = [Validators.required, Validators.maxLength(10)];
}
`

Here, only author validators are changed. Other validators are kept unchanged.

### Add your own property validators (aka app validators)

If you need to create your own validators, such as postalCode or isbn validators, add new files in app-validators and register it in app-validators/index.ts.

To use it, import AppValidators, for example in property validators files:

`
import { AppValidators } from '../backend/forms';
`

$3

Todo

$3

The form service automatically provides a form with the matching validator according to the provided item.

If you need to create a form from another class or validator, do not use the FormService and instantiate it manually providing base class and validator:

`
import { FormBuilder } from '@angular/forms';
import { Form } from './Form';

[...]
this.form = new Form(this.formBuilder, customBook, {itemClass: CustomBook, validator: customBookValidator});
``