Angular Material (8) Error Message (from Validator) being displayed when Page reloaded

I am new to Angular Material. I am working on a Registration form using Angular Material (8). When doing so, I am seeing that the Error Message is displayed when the page is Reloaded (by hitting the “Refresh” Button on the browser). The field is never touched in any way, shape or form.

enter image description here

Why is this the case?


File: register.component.html

[ ... snip ...]

       <div class="flex-register-form">

            <!-- Form -->
            <form [formGroup]="registerForm" (ngSubmit)="registerForm.valid && onSubmit()" class="text-center">

                <div class="form-col">
                    <div class="col">
                        <!-- First name -->
                        <div class="md-form">
                            <input required type="text" id="materialRegisterFormFirstName" class="form-control" mdbInput
                                formControlName="firstname" />
                            <label for="materialRegisterFormFirstName">First name</label>
                            <mat-error *ngIf="registerForm.controls['firstname'].hasError('required')" >First name is required</mat-error>

[ ... snip ...]

File: register.component.ts

import { Component, OnInit } from '@angular/core';
import { RegisterModel } from '../../models/register.models';
import {  FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';

  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']

export class RegisterComponent implements OnInit {

  user: RegisterModel = new RegisterModel();
  registerForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {


  ngOnInit() {
    this.registerForm = new FormGroup({
      'firstname': new FormControl(null, [Validators.required]),
      'lastname': new FormControl(null, [Validators.required, Validators.maxLength(25)]),
      'email': new FormControl(null, [Validators.required,, Validators.maxLength(25)]),
      'password': new FormControl(null, [Validators.required, Validators.minLength(8), Validators.maxLength(25)]),
      'agree': new FormControl(null, [Validators.required])

  onSubmit() {
    console.log(" was submited ");


Leave a Reply

Your email address will not be published. Required fields are marked *