ugly-error-handling.html

<!-- first name -->
<mat-form-field appearance="outline">
    <mat-label> First Name</mat-label>
    <input matInput type="text" formControlName="first_name">
    <mat-error *ngIf="signUpForm.get('first_name').errors.required">
        This field is required
    </mat-error>
    <mat-error *ngIf="signUpForm.get('first_name').errors.minlength">
        Min length is {{signUpForm.get('first_name').errors.minlength.requiredLength}}
    </mat-error>
    <mat-error *ngIf="signUpForm.get('first_name').errors.maxlength">
        Max length is {{signUpForm.get('first_name').errors.maxlength.requiredLength}}
    </mat-error>
</mat-form-field>