AngularJS 2.0 Forms & Validation

In this screen cast I familiarized myself with angular 2 forms by extending the todo application that we created in our previous screencast, check out the screencast below and let me know what you think.

Common misstakes

I’ve seen many questions on stackoverflow where people even struggle to setup the most basic example. The angular team are lagging behind with sample code on angular.io and the typescript definition file on definitely typed is a mess.

At the time of writing the current alpha release is up to 34, the highlighted lines are essential to get right be able to use angular 2 forms.

import {Component, View, bootstrap} from 'angular2/angular2';
import {formDirectives, FormBuilder, ControlGroup, Control} from 'angular2/angular2';
import {Validators} from 'angular2/angular2';

@Component({
  selector: 'app',
  viewBindings: [FormBuilder]
})
@View({
  templateUrl: 'app.html', 
  directives: [formDirectives]
})
class AppComponent {
  constructor(fb: FormBuilder) {    
    // use the formbuilder here...
  }
}

1. Don’t try to import from angular2/forms even if their documentation says so if you’re using the definition file from definitely typed, it’s all under angular2/angular2.
2. Make sure you pass the FormBuilder to a property named viewBindings to the Component-annotation and nothing else, this keeps changing name so it’s easy to get wrong.
3. If dependency injection to the constructor fails, you are probably doing the first point wrong.

Completing the angular.d.ts file

The angular team seems to be lazy on updating the definitely typed repo definition file. If you’re playing around with forms, you probably want to mark a field as required. To be able to do so by following some samples, you’ll need to add a static property to the Validators class in the definition file angular2.d.ts.

class Validators {
  static required: any;
}

Conclusion

I can’t shake the feeling that they are over complicating things, the syntax is very verbose and stuff is happening behind the scenes that always don’t seem that intuitive. The code is changing a lot from one version to another, it feels a bit premature to see all the ng-conf sessions talking about angular 2. It’s obvious that the community is frustrated (from reading blogs and stack overflow questions) over that it’s quite hard to get a simple sample up and running even though I personally don’t share that feeling.

Anyways, I hope you guys enjoyed the screencast, until next time, have a nice day as always!

Source code as always at @ https://github.com/ajtowf/ng2_overview/tree/ng2