Data validation

A good UX practice is to validate the information that users enter in the form as soon as it leaves the filled field. This minimizes user frustration while improving the information that will be sent to the backend.

Using reactive forms, we can use utility classes created by the Angular team to add validations that are commonly used in forms. Let’s improve our project, first in the NewEntryFormReactiveComponent component:

. . .
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
. . .
export class NewEntryFormReactiveComponent implements OnInit {
. . .
 ngOnInit() {
   this.entryForm = this.formBuilder.group({
     date: ['', Validators.required],
     exercise: ['', Validators.required],
     sets: ['', [Validators.required, Validators.min(0)]],
     reps: ['', [Validators...