如何以角度 2 的形式显示验证消息？答案

【问题标题】：how to show validate message in form in angular 2?如何以角度 2 的形式显示验证消息？
【发布时间】：2023-03-13 22:45:02
【问题描述】：

我正在尝试以角度 2 的形式显示验证消息？我收到此错误

无法读取未定义的属性“hasError”

我添加了这些行

 <div *ngIf="username.hasError('required') && username.touched" 
           class="error-box"> username is required</div>    
       <div *ngIf="username.hasError('minlength') && username.touched" 
           class="error-box"> Minimum password length is 8!</div>

这是我的代码 https://plnkr.co/edit/slhySWT0mJXkloGK1kfO?p=preview

【问题讨论】：

标签： angularjs ionic-framework angular ionic2 angular2-routing

【解决方案1】：

这应该做你想做的：

<ion-input type="text" ngControl="username" #username="ngForm"></ion-input>

 <div *ngIf="username.errors?.required && username.touched" 
           class="error-box"> username is required</div>    
       <div *ngIf="username.errors?.minlength && username.touched" 
           class="error-box"> Minimum password length is 8!</div>

Plunker example

【讨论】：

这是 elvis (?) 运算符，这可以防止在未定义变量时抛出错误
抱歉，位置错误。 errors 可以是null，username 不是。是的，就像@PardeepJain 提到的那样，这是为了避免当errors 是null 时出现错误消息。 ?. 被称为安全导航或 Elvis 运算符，它仅在 ?. 之前的部分不是 null 时评估表达式。
还需要通过某种方式使username 可用。我更新了我的答案（添加#username="ngForm" 或@yurzui 在他的回答中解释的内容）