Building small scale forms using Angular’s Forms Module
This demo is not aimed to make use of routing but is to show how one can create a form, bind to a component in order to have synchronized data that can be read and passed along. The steps are creating angular application, creating a model, creating a component to render a form, build form to submit new model instance.
Open a terminal, navigate to path, use the following angular command and make appropriate selections.
ng new <fileName>
Cd into this folder from terminal and use following command to open project in Visual Studio Code
code .
This demo will show how to use a template-driven form by making an Athlete model and a form to add a new athlete. The first step for using a template-driven form in Angular is to import FormsModule into the root module file, app.module.ts. Now the project has access to methods and configuration from Angular’s Forms module.
For the sake of encapsulation and maintaining a structure of code that can be scalable and easily maintained, we will create a model class for the type of object we wish to create. Use the following command to generate a class inside of a folder called, “model.”
ng generate class model/athlete
Inside of this class, Athlete, create a constructor that has the properties required to create an Athlete; name, sport, and team.
