DEPRECATED REPOSITORY: USE THIS REPO INSTEAD
Directives for binding Angular Reactive form controls and arrays to Firebase references.
npm i @nowzoo/ngx-fire --save
This library depends upon Firebase and the Angular Reactive Forms module. It's up to you how you create Firebase references: a good option is angularfire2.
Import NgxFireModule
and ReactiveFormsModule
.
import { ReactiveFormsModule } from '@angular/forms';
import { NgxFireModule } from '@nowzoo/ngx-fire';
// other imports...
@NgModule({
imports: [
ReactiveFormsModule,
NgxFireModule,
// etc..
]
})
export class SomeModule { }
Bind a control with [ngxFireControl]="ref"
...
<input
type="text"
class="form-control"
placeholder="How's it going?"
[formControl]="control"
[ngxFireControl]="ref"
#fc="ngxFireControl"
debounce="1000"
(blur)="fc.save()">
Bind a numerically indexed array with [ngxFireArray]="ref"
...
<div formArrayName="tags" [ngxFireArray]="ref" #tagsFa="ngxFireArray">
....
</div>
See the demos (site, code) for concrete examples.
Binds a FormControl to a reference. Must be used in conjunction with FormControlDirective
([formControl]="ctl"
) or FormControlName
(formControlName="myName"
.)
selector: [ngxFireControl]
exportAs: ngxFireControl
ngxFireControl: Reference
Required.debounce: number
Optional. Default: 0. The amount of time in milliseconds to debounce form control changes before saving. Useful for text controls.trim: boolean
Optional. Default: true. If true, and if the control value is a string, the value will be trimmed before saving.
save(): void
Saves the current control value to the database. Rejects if the control is not valid or if there is a Firebase error.
error: Observable<Error>
Populated if the Firebase ref throws an error either reading or writing.saving: Observable<boolean>
True if the control value is being saved to the database.value: Observable<any>
The current database value.ref: Reference
The reference you passed in viangxFireControl
Binds a FormArray to a reference. Must be used in conjunction with FormArrayName
(formArrayName="myName"
.)
selector: [ngxFireArray]
exportAs: ngxFireArray
ngxFireArray: Reference
Required.controlFactory: () => FormControl|FormGroup
Optional. A function that returns a group or control for each element of the array. By default this is a function that returns a FormControl with therequired
validator. Note that you should only pass an empty group or control: the value is set from the database.
push(value: any): void
Pushesvalue
to the end of the array and saves to the database.remove(i: number): void
Removes the element ati
and saves the array to the database.move(from: number, to: number): void
Moves the element atfrom
toto
and saves the array to the database.
error: Observable<Error>
Populated if the Firebase ref throws an error either reading or writing.saving: Observable<boolean>
True if the array value is being saved to the database, i.e. when pushing, removing or moving.value: Observable<any>
The current database value.ref: Reference
The reference you passed in viangxFireArray
addControl
An unattached FormGroup or FormControl, created withcontrolFactory()
that you can use to push new elements to the array.length: number
The length of the FormArray.controls: (FormGroup|FormControl)[]
The child controls.
Contributions and suggestions are welcome.
Get started...
git clone [email protected]:nowzoo/ngx-fire.git
cd ngx-fire
npm i
ng build ngx-fire --prod
The library code is found in projects/ngx-fire
.
The demo site code is in src/app
.
This library was built with the Angular CLI, so...
# test the library...
ng test ngx-fire
# build the library...
ng build ngx-fire --prod
# serve the demo site locally...
ng serve
Note that changes to the library code are not automatically reflected in the locally-served demo site. You must run ng build ngx-fire
whenever you make changes to the library. But the local server does watch for changes to the built library -- so you don't need to restart the server.
If you use Wallaby to run unit tests, select the projects/ngx-fire/wallaby.js
as your config file.