Angular uses HTML best practices, so we will now create the form fields under the HTML <form> tag. In the input fields, we are respecting the HTML semantics and creating the fields as <input> with the correct types for the type of information the client needs.
Let’s run our application with the ng serve command. By clicking on the New Entry button, we will be able to notice our diary entry addition form.
Figure 6.1 – Gym Diary Form UI
Here, we have the structure and template of our form. Now, we are going to prepare for Angular to manage the state of the fields via user input in the template. To use the template-driven form, we need to import the FormModule module to our feature module, DiaryModule:
import { FormsModule } from ‘@angular/forms’;
@NgModule({
declarations: [
DiaryComponent,
EntryItemComponent,
ListEntriesComponent,
NewItemButtonComponent,
NewEntryFormTemplateComponent,
],
imports: [CommonModule, DiaryRoutingModule, RouterModule,
FormsModule
],
})
export class DiaryModule {}
In our form template, we will add the directives that will create and link the form information to its data model:
.
.
.
<form
(ngSubmit)=”newEntry()”
class=”mx-auto max-w-sm rounded bg-gray-200 p-4″>
<div class=”mb-4″>
.
.
.
<input type=”date” id=”date” name=”date”
.
.
.
[(ngModel)]=”entry.date”
/>
</div>
<div class=”mb-4″>
.
.
.
<input type=”text” id=”exercise” name=”exercise”
[(ngModel)]=”entry.exercise”
.
.
.
/>
</div>
<div class=”mb-4″>
.
.
.
<input type=”number” id=”sets” name=”sets”
[(ngModel)]=”entry.sets”
.
.
./>
</div>
<div class=”mb-4″>
.
.
.
<input type=”number” id=”reps” name=”reps”
[(ngModel)]=”entry.reps”
.
.
./>
.
.
.
</form>
</div>
{{ entry | json }}
The first change we need to make to our template is to use the ngSubmit parameter to state which method will be called by Angular when the user submits the form. Then, we link the HTML input elements with the data model that will represent the form. We do this through the [(ngModel)] directive.
ngModel is an object managed by the FormModule module that represents the form’s data model. The use of square brackets and parentheses signals to Angular that we are performing a two-way data binding on the property.
This means that the ngModel property will both receive the form property and emit events. Finally, for development and debugging purposes, we are placing the content of the entry object in the footer and formatting it with the JSON pipe.
Let’s finish the form by changing the component’s TypeScript file:
export class NewEntryFormTemplateComponent {
private exerciseSetsService = inject(ExerciseSetsService);
private router = inject(Router);
entry: ExerciseSet = { date: new Date(), exercise: ”, reps: 0, sets: 0 };
newEntry() {
const newEntry = { …this.entry };
this.exerciseSetsService
.addNewItem(newEntry)
.subscribe((entry) => this.router.navigate([‘/home’]));
}
}
First, we inject the ExerciseSetsService service for the backend communication and the router service because we want to return to the diary as soon as the user creates a new entry.
Soon after we create the entry object that represents the form’s data model, it is important that we start it with an empty object because Angular makes the binding as soon as the form is loaded. Finally, we create the newEntry method, which will send the form data to the backend through the ExerciseSetsService service.
For more details about Angular services, see Chapter 5, Angular Services and the Singleton Pattern. If we run our project and fill in the data, we can see that we are back to the diary screen with the new entry in it.
Notice that at no point did we need to interact with the entry object, as Angular’s form template engine took care of that for us! This type of form can be used for simpler situations, but now we will see the way recommended by the Angular team to create all types of forms: reactive forms!