Let's have a peek at the interface of the AddDeveloper component's controller again:
export class AddDeveloper { submitted: false; successMessage: string; developer = new Developer(); //... constructor(private developers: DeveloperCollection) {} addDeveloper(form) {...} }
This interface has a field of the Developer type, and we bind the form controls to its properties using the NgModel directive. The class also has a method called addDeveloper, which is being invoked on the submission of the form. We declare this by binding to the ngSubmit event using the following:
<!-- ch7/multi-page-template-driven/add_developer.html --> <form #f="form" (ngSubmit)="addDeveloper()" class="form col-md-4" [hidden]="submitted"> ... <button class="btn btn-default" ...