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

This comment has been minimized.

Show comment Hide comment
@a-moufaddel

a-moufaddel May 20, 2015

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

Regards.

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

Regards.

@jpsfs

This comment has been minimized.

Show comment Hide comment
@jpsfs

jpsfs 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.

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

This comment has been minimized.

Show comment Hide comment
@ymuller

ymuller 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

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

This comment has been minimized.

Show comment Hide comment
@ludohenin

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

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

This comment has been minimized.

Show comment Hide comment
@gngeorgiev

gngeorgiev 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.

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

@aucevica

This comment has been minimized.

Show comment Hide comment
@aucevica

aucevica 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.

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