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" [disabled]="!f.form.valid">Add</button> 
</form> 

In the preceding snippet, we can note two more...