In our project, if we look at the types of objects and values, we can see that they are all of the any type. Although functional, it is possible to improve this development experience by better using TypeScript’s type checking.
Let’s refactor our code in the component as follows:
export class NewEntryFormReactiveComponent {
private formBuilder = inject(FormBuilder);
private exerciseSetsService = inject(ExerciseSetsService);
private router = inject(Router);
public entryForm = this.formBuilder.group({
date: [new Date(), Validators.required],
exercise: [”, Validators.required],
sets: [0, [Validators.required, Validators.min(0), multipleValidator(2)]],
reps: [0, [Validators.required, Validators.min(0), multipleValidator(3)]],
});
newEntry() {
if (this.entryForm.valid) {
const newEntry = { …this.entryForm.value };
this.exerciseSetsService
.addNewItem(newEntry)
.subscribe((entry) => this.router.navigate([‘/home’]));
}
}
}
We moved the creation of the form object to the construction of the component and set the initialization of the fields with the types that will be accepted by the API. Using Visual Studio Code’s IntelliSense, we can see that Angular infers the types and now we have an object very close to the ExerciseSet type.
With this change, however, the addNewItem method threw an error, which is actually a good thing, as it means that we are now using TypeScript’s type checking to discover possible bugs that could only appear at runtime. To resolve this issue, we first need to change the service to receive an object that can contain some of the attributes of ExerciseSet.
In the service, change the addNewItem method:
addNewItem(item: Partial<ExerciseSet>): Observable<ExerciseSet> {
return this.httpClient.post<ExerciseSet>(this.url, item);
}
Here, we use the Partial type of TypeScript to inform the function that it can receive an object with part of the interface attributes. Returning to our component, we can see that it still has an error. This happens because it can receive null values in the form’s attributes.
To resolve this, let’s change the FormBuilder service to the NonNullableFormBuilder type as follows:
export class NewEntryFormReactiveComponent {
.
.
.
private formBuilder = inject(NonNullableFormBuilder);
.
.
.
}
With this change, Angular itself performs this verification. The only requirement is that all the form fields are initialized, which we have already done here.
With that, we have our reactive form working and can now use TypeScript’s type-checking more effectively!
Summary
In this chapter, we explored Angular forms and how to use them to improve our user experience and our team’s productivity. We learned how to use template forms for simpler requirements and explored how Angular performs the binding between the HTML and the data model using the ngModel object.
We also work with reactive forms, which opens up many possibilities for creating and manipulating forms. Regarding reactive forms, we studied how to apply validations to fields and how to create our own custom validation functions. Finally, we refactored our reactive form to use TypeScript type checking using typed forms.
In the next chapter, we will explore Angular’s routing mechanism and the possibilities it can have for our applications.