html - Angular mat-error 不弹出，隐藏（包括图片）

Question

我是一个正在努力创建网站的人。

在我创建登录/注册系统时，mat-error 有效，但显示为隐藏。

我的意思是你可以在下面看到。

在此处输入图像描述

如果您看到图像，它会检测到错误并打招呼，但我看不到我是否没有拖动它。

我的注册代码如下

<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">로그인 페이지로 가기&lt;/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>

有没有办法让 mat-error 正确地向用户显示错误？

Answer 1

使用""而不是''进入 mat-error 条件。

<mat-error *ngIf = "emailInput.invalid">hello.</mat-error>

Answer 2

mat-error应该在 amat-form-field之后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