Home

NgxFormObject

ngx-form-object is an abstraction on top of Angular's reactive forms.

Installation

NPM

npm install ngx-form-object --save

Yarn

yarn add ngx-form-object

Basic usage

1. Import NgxFormObjectModule

To start using ngx-form-object you have to import NgxFormObjectModule into root module of your project.

...
import { AppComponent } from './app.component';
import { NgxFormObjectModule } from 'ngx-form-object';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    NgxFormObjectModule
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 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 exposed.

import { Attribute, HasMany } from 'ngx-form-object';

class User {
  @Attribute()
  name: string;

  @BelongsTo()
  depertment: Department;

  @HasMany()
  cars: Array<Car>
}

3. 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';

export class UserFormObject extends FormObject {
  constructor(
    public model: User,
    protected options: Form
  ) {
    super(model, options);
  }
}

4. Create a form store (form)

Form store is created based on the belonging form object. Form object is created out of the model.

const user: User = new User();
const userFormObject: UserFormObject = new UserFormObject(user, null);
const userForm: FormStore = this.formObjectBuilder.create(userFormObject);

5. 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>

6. Map a service for our model

To save the form (the model), we can simply call .save() on FormStore instance.

userForm.save();

This will search for a service responsible for handling with user model. Form object will search for the service in formObject.serviceMappings[key]. Key in the serviceMappings object represents the model type (model instance name).

user.form-object.ts

constructor(
  ...,
  private injector: Injector,
) {
  ...

  this.serviceMappings = {
    user: injector.get(UserService),
  };
}

In this case, injector is used for injecting the service. Value in the serviceMappings object represents an instance of a service.

Author

• Mihael Šafarić

License

Licensed under the MIT License - see the LICENSE for details.

Credits

Maintained and sponsered by Infinum © 2020