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.