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" ...
Get Getting Started with Angular - Second Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.