Version: Next

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.

user.model.ts

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.

user.form-object.ts

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.