Getting Started with Angular - Second Edition

Storing the form data

Let's 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) {...} 
} 

It 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:

<!-- ch6/ts/multi-page-template-driven/add_developer.html --> <form #f="form" (ngSubmit)="addDeveloper()" class="form col-md-4" [hidden]="submitted"> ... <button class="btn btn-default" type="submit" ...