Add the following imports to add_developer.ts: ( dunebook/ts/formstut/add_developer.ts.)

import {
  FORM_DIRECTIVES,
  FORM_PROVIDERS
} from 'angular2/common

The next thing we need to do is add FORM_DIRECTIVES to the list of directives used by the AddDeveloper component. The FORM_DIRECTIVES directives contains a set of predefined directives for managing Angular 2 forms, such as the form and ngModel directives.

The FORM_PROVIDERS is an array with a predefined set of providers that we can use for injecting the values associated with their tokens in the classes of our application.

Now update the AddDeveloper implementation to the following:

@Component({
  selector: 'dev-add',
  templateUrl: './add_developer.html',
  styles: […],
  directives: [FORM_DIRECTIVES],
  providers: [FORM_PROVIDERS]
})
export class AddDeveloper {
  developer = new Developer();
  errorMessage: string;
  successMessage: string;
  submitted = false;
  technologies: string[] = [
    'JavaScript',
    'C',
    'C#',
    'Clojure'
  ];
  constructor(private developers: DeveloperCollection) {}
  addDeveloper() {}
}

The developer property contains the information associated with the current developer that we’re adding with the form. The last two properties, errorMessage and successMessage, are going to be used respectively for displaying the current form’s error or success messages once the developer has been successfully added to the developers collection, or an error has occurred.

Chapter 2 of 9