Angular mat-error不弹出，隐藏（含图）

Question

我是正在尝试创建网站的人。

当我创建 login/register 系统时，mat-error 起作用了，但显示我是隐藏的。

我的意思是你可以看下面

enter image description here

看到图片就检测到错误，打个招呼，但我是不是拖着看不出来

我的注册码如下


<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>

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

Answer 1

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

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

Answer 2

mat-error 应该在 matInput:

之后的 mat-form-field 里面

<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

Angular mat-error不弹出，隐藏（含图）

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

html

angularjs

angular-material

classformaterror

angular