Lysis Angular form validator generator
Overview
This generator creates Angular validators from the backend, to ease forms creation.
Basic usage
The controller
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<Book> = [];
form: Form<Book>;
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<Book>(new Book());
}
// used in the template, for example in a data table
selectBook(book: Book): void {
this.form = this.formService.makeForm<Book>(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 .
The template
The associated template takes advantage of Angular form groups to display values in form fields and to handle validation:
<form [formGroup]="form.group" (submit)="commitBook()">
<input type="text" placeholder="Title" formControlName="title">
<textarea placeholder="Description" formControlName="description"></textarea>
<input type="date" placeholder="Publication date" formControlName="publicationDate">
[...]
<button>Apply</button>
</form>
Use
Prerequisites
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
Configuration
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
.
Add modules and services
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,
[...]
]
})
Start Lysis
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.
Customize property validators
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';
Item type/validator matcher
Todo
Instantiate a new form validator manually
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<CustomBook>(this.formBuilder, customBook, {itemClass: CustomBook, validator: customBookValidator});