Implement Nested FormControl for Angular Reactive Forms.
npm install @webdev-tools/ng-nested-reactive-forms!travis build
!Codecov
!NPM version
!Downloads
!Downloads
Implement Nested FormControl for Angular Reactive Forms.
Split your forms as much as you need,
and let the nested reactive form components handle the data changes.
The form tag and the inputs doesn't have to share the same scope.
Enforce the usage of an Entity, also know as Model, to share data between the form and the controller.
Use two-way data-binding as AngularJS 1.x does.
Do not mutate the original Entity when user make changes to inputs.
Define the data-binding using dot-notation e.g.: user.addresses[1].streetName
It is not necessary to pass the Entity through all nested components,
forms and inputs will communicate with each other
no matter how deep the nested components are.
Submit event will only be triggered if all inputs are Valid.
Only two directives are mandatory:
1. nrfForm on the tag
2. *nrfNestedControl on a parent of a given input, textarea, select, or even a custom component.
Form tag``html`
(nrfSubmit)="handleSubmit($event)"
[nrfEntity]="anyObject"
>
| Property | type | Description |
|-------------|----------|------------------------------------------------------------------------------------|
| nrfForm | -- | Required The main directive that enables communication with the nested inputs. |
| (nrfSubmit) | function | This @Output only will be called if all the inputs inside this form are valid. |Entity
| [nrfEntity] | Object | The that will be handled by this form. If not empty, inputs will be pre-filled using its data |
| Property | type | Description |
|------------|--------------------|------------------------------------------------------|
| entity | Object | A reference to the original Entity passed to the form tag |
| formData | Object | An Object containing all Entity's properties and changes made by the user |
| formGroup | FormGroup | The form FormGroup instance, used to validate fields |
| nrfForm | nNgRFFormDirective | The nrfForm directive instance |
| event | Event | The original HTML event from the form submit |
tagYou have to put *nrfNestedControl on an input parent tag. [formControl]
And use directly on the input tag, as described on
Angular Reactive Forms.
`html`
Angular has two approaches to handle forms:
1. Template-driven forms
2. Reactive Forms
Both of them, require that the