Simple Angular 2 Forms with Firebase

index.ts

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.

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

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.

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.