Angular - 验证必填字段 - 为什么需要一个带有验证的 div 来包装错误消息 div？答案

【问题标题】：Angular - Validating required field - why does there need to be a div with validation wrapping the error message div?Angular - 验证必填字段 - 为什么需要一个带有验证的 div 来包装错误消息 div？
【发布时间】：2019-06-10 18:36:49
【问题描述】：

我一直在关注 Angular 文档以进行表单验证，并注意到他们在另一个 div 中包装了一个错误消息 div，该 div 检查该字段是否无效和被触及。像这样的：

 <div *ngIf="name.invalid && name.touched">
     <div *ngIf="name.errors.required" class="validators">Please 
     enter a name</div>
 </div>

我试过没有这样的父 div：

<div *ngIf="name.errors.required && name.touched" class="validators">Please enter a name</div>

但是当我在字段中输入时出现以下错误：

FooterComponent.html:8 ERROR TypeError: Cannot read property 'required' of null
at Object.eval [as updateDirectives] (FooterComponent.html:9)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:22477)
at checkAndUpdateView (core.js:21873)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056) 
at checkAndUpdateView (core.js:21879)
at callViewAction (core.js:22114)
at execComponentViewsAction (core.js:22056)
at checkAndUpdateView (core.js:21879)
at callWithDebugContext (core.js:22767)

我试图理解为什么我会在没有父 div 及其无效检查首先发生的情况下得到错误。是因为我正在“抢先”检查该字段的错误对象吗？通过放置 ...*ngIf="name.invalid"... 我正在做一个“更安全”的检查，在哪里不会抛出错误？

【问题讨论】：

试试name.errors?.required
@ABOS 成功了。谢谢！

标签： angular

【解决方案1】：

如果父 div *ngIf 计算结果为 false，则子元素将不会被渲染，并且它们的代码（例如 name.errors.required）将不会被执行。

您收到错误是因为在您的代码中 name.errors.required 始终执行，即使在 name.invalid == false 时也是如此。

name.invalid 表示存在验证错误，即name.errors != null。通过首先检查父div 中的name.invalid == true，然后才渲染内部元素，您可以保证内部div 中的name.errors != null 和name.errors.required 可以正确调用而不会出错。

【讨论】：