Angular mat-error does not pop up, hided (picture included)

Question

I am the one who is trying to work on creating website.

While I am creating login/register system, mat-error is worked, but show me as hidden.

What I mean is that you can see below.

enter image description here

If you see the image, it detects the error, and said hello, but I cannot see if I am not dragging it.

My code for register is below

<div class="wrapper">
    <div class="page-header" style="background-image: url('./assets/img/sections/Register.jpg');">
        <div class="filter"></div>
            <div class="container">
                <div class="row">
                    
                    <div class="col-md-4 col-sm-6 ml-auto mr-auto">
                    </div>
                    <div class="col-md-4 col-sm-6 ml-auto mr-auto">
                    </div>
                    

                    <div class="col-md-4 col-sm-6 ml-auto mr-auto">
                        <div class="card card-register">
                            <h3 class="card-title text-center">Register</h3>

                            <div class="division">
                                <div class="line l"></div>
                                <div class="line r"></div>
                            </div>
                            <mat-spinner *ngIf = 'isLoading'></mat-spinner>
                            <form (submit) = 'onSignup(signupForm)' #signupForm = 'ngForm' *ngIf = "!isLoading"> 

                                <input matInput name = 'email' ngModel type="email"  placeholder="E-mail" class="form-control" #emailInput = "ngModel" maxlength='25' required email>
                                <mat-error *ngIf = 'emailInput.invalid'>hello.</mat-error>

                                <input ngModel type="password" matInput name = 'password' class="form-control" placeholder="password" #passwordInput = "ngModel" maxlength='25' required password>

                                <input ngModel type="password" matInput name = 'confirm_password' class="form-control" placeholder="Confirm Password" #confirm_passwordInput = "ngModel" maxlength='25' required confirm_password>

                                <input ngModel type = 'Recommendation' name = 'Recommendation' class = "form-control" placeholder = 'Reference' #RecommendationInput = "ngModel" maxlength='25' required Recommendation>

                                

                                <button class="btn btn-block btn-primary" type = "submit">Register</button>
                            </form>
                            <div class="login">
                                <p>아이디가 있으십니까? <a href="http://localhost:4200/#/auth/login">로그인 페이지로 가기</a></p>
                            </div>
                        </div>
                        
                    </div>

                    
                </div>
            </div>
        <div class="demo-footer text-center">
                <h6>&copy; {{data | date: 'yyyy'}}, made with <i class="fa fa-heart heart"></i> by ASIASMS TEAM</h6>
        </div>
    </div>
</div>

Is there any way to let the mat-error show the error properly to the user?

Answer 1

mat-error should be inside a mat-form-field after the matInput:

<mat-form-field>
  <input matInput name="email" ngModel type="email" placeholder="E-mail" class="form-control" #emailInput="ngModel" maxlength="25" required email/>
  <mat-error *ngIf="emailInput.invalid">Error</mat-error>
</mat-form-field>

https://material.angular.io/components/form-field/overview