Skip to content

Instantly share code, notes, and snippets.

Embed
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);
}
@a-moufaddel
Copy link

a-moufaddel commented May 20, 2015

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

Regards.

@jpsfs
Copy link

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
Copy link

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

@ludohenin
Copy link

ludohenin commented May 31, 2015

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(){}
   //...
}

@gngeorgiev
Copy link

gngeorgiev commented Jul 5, 2015

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

@aucevica
Copy link

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