Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Simple Angular 2 Forms with Firebase
import {bootstrap, Component, Decorator, View, If, For, EventEmitter} from 'angular2/angular2';
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
@Component({
selector: 'app',
injectables: [FormBuilder]
})
@View({
template: `
<div class="container" [control-group]="myForm">
<h2>Simple Form</h2>
<div class="form-group"
[class.has-success]="myForm.controls.name.valid"
[class.has-error]="! myForm.controls.name.valid"
>
<label class="control-label">Name</label>
<input control="name" class="form-control">
</div>
<div class="form-group"
[class.has-success]="myForm.controls.age.valid"
[class.has-error]="! myForm.controls.age.valid"
>
<label class="control-label">Age</label>
<input type="number" control="name" class="form-control">
</div>
</div>
`,
directives: [FormDirectives]
})
class AppComponent {
myForm:ControlGroup;
builder:FormBuilder;
constructor(b:FormBuilder) {
this.builder = b;
this.myForm = b.group({
name: ["", Validators.required], // required
age: [""] // optional
});
this.ref = new Firebase('https://ngforms.firebaseio.com/form');
// save changes to Firebase as the form updates
this.myForm.valueChanges.subscribe(function(value) {
this.ref.set(value);
}.bind(this));
}
}
export function main() {
bootstrap(AppComponent);
}

Hello David,
how can I get the file forms.d.ts ?

Regards.

jpsfs commented May 27, 2015

@abdel7a9 I think this code is ES6, you don't need the .d.ts here.
A complete set of Angular2 typings is still in the works as far as I know.

ymuller commented May 29, 2015

Hello,

I'm not able to import "angular2/forms";
I've got the following error from tsc

tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts
app.ts(4,69): error TS2307: Cannot find external module 'angular2/forms'.

Any idea ?
Many thx

here is a fairly decent definition file. You will have to include yourself what's missing or badly declared like:

declare module "angular2/forms" {
   class FormBuilder{}
   function formDirectives(){}
   //...
}

You can also use https://github.com/gngeorgiev/firesync. It does not depend on a framework so it should work nicely with angular2.

aucevica commented Jan 18, 2017

I'm getting crazy with that!!! I'm new on angular and firebase too, so i'm suffering to populate my forms with read data from firebase promise. Yes, I´m suffering too to understand how to deal with promises vs observables.
I will apreciate any help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment