<form [formGroup]="reactiveForm" novalidate autocomplete="off"> <div class="form-field"> <label>Title:</label> <input formControlName="title"> <div class="field-error-message" *ngIf="reactiveForm.controls.title.errors?.required"> Title is required </div> </form>
In this tutorial we are going to learn how we mark form fields in error and display error messages to the user in the case of Angular 2 model driven forms. We will see that the approach is similar than what we did while using template driven forms, but in this case we don't have template exports available.
We are going to see how the FormControl api exposes a list of controls each with a separate status and its own list of errors, and how that can be used to display messages to the user.