Ngx-model2form NPM

ngx-model2form

A RxJS operator to map a model entity to its equivalent Angular form entity.

Installing

npm install --save ngx-model2form

And import to your main application module

import 'ngx-model2form';

You are ready to use the RxJS custom operator.

Usage

Assuming this.people$ is a stream of people, represented by the model:

interface Person {
  name: string;
  height: number;
  hobbies: string[];
}

Chaining the operator with the stream:

this.peopleForm$ = this.people$.toNgForm();

results with a stream of FormGroup/FormArray/FormControl with a structure simillar to the originated Person model.

This stream can be passed through a component input to benefit of the component's change detector, and transform into the underlying form entity.

Validators

You can pass validator/s as-is (for primitives) or an object, reflecting the structure of your model.

Primitives:

this.people$.toNgForm(Validators.required);
this.people$.toNgForm([Validators.min(0), Validators.max(9)]);

Object:

this.people$.toNgForm({
  name: Validators.required,
  height: [Validators.min(0), Validators.max(9)]]
});

Notice that the hobbies property is missing, and thus will be omitted from validation.

Array property

Array property can be passed a simple validator/s to validate every item in the list, or an object with index key/s to validate a single or specific items.

Validating the whole array with a validation set:

this.people$.toNgForm({
  hobbies: [Validators.min(0), Validators.max(9)]
});

Validating specific items:

this.people$.toNgForm({
  hobbies: {
    "0": [Validators.min(0), Validators.max(9)],
    "3": Validators.required
  }
});

Selector Function:

Validators can be passed through a selector function. The selector is given the current model as a parameter, and the returned value determines the validator/s for the form (returned as a primitive, array or an object).

this.people$.toNgForm((person: Person) => ({
  height: (person.height > 193) ? Validators.required : undefined
}));

Planned features

Include model properties: Only transform properties that are mentioned in the include entity into form entities. Keep other properties as object properties.
Exclude model properties: Omit transforming properties that are mentioned in the exclude entity into form entities. Keep transforming other properties into form entities.