Basic usage
1. Create a model
The model will be used to populate the form.
The model must specify which properties are attribute properties (his own properties), which are belongsTo properties, and which properties are hasMany properties. For those puproses @Attribute
, @BelongsTo
, and @HasMany
decorators are provided. Find out more.
import { Attribute, BelongsTo, HasMany } from 'ngx-form-object';
class User {
@Attribute()
name: string;
@BelongsTo()
address: Address;
@HasMany()
cars: Array<Car>;
}
2. Create a form object class
The task of a specific form object is to manage forms of a specific type.
import { FormObject, FormObjectOptions } from 'ngx-form-object';
import { User } from './user.model';
export class UserFormObject extends FormObject<User> {
constructor(
public model: User,
protected options: FormObjectOptions
) {
super(model, options);
}
}
3. Create a form store (form)
FormObject
is created out of the model. Once created, the actual form can be accessed via formObject.form
getter.
const user: User = new User();
const userFormObject: UserFormObject = new UserFormObject(user, null);
const userForm: FormStore<User> = userFormObject.form;
4. Map form store to the template
Import ReactiveFormsModule
to the parent module.
Form store can be used in a template in the same way as any other form created by Angular's FormBuilder
.
<form [formGroup]="userForm">
<input formControlName="name" />
</form>
5. Implement a saving functionality
To save the form (model), .save()
on a FormStore
instance should be used.
userForm.save();
In the background, beforeSave
, save
, and afterSave
hooks from FormObject are called. Out of those three, only the save
function is mandatory (unless the saving functionality is not used). See saving guide for more details.