代码之家 › 专栏 › 技术社区 › Tobias von Falkenhayn

绑定到ngModel验证时,角度ngClass触发更改检测错误

angular forms

1

Tobias von Falkenhayn · 技术社区 · 8 年前

我试图根据邮件验证,在Angular 2中设置标签的颜色,如下所示:

<input type="email" name="email" [(ngModel)]="email" email #currentEmail="ngModel" [ngClass]="currentEmail.invalid ? 'error' : 'none'">

它在我的页面上按预期工作,但在Visual Studio代码中,我收到以下错误消息:

错误:ExpressionChangedAfterItHasBeenCheckedError:检查后,表达式已更改。上一个值:“error”。当前值:“无”。

所以我的问题是:

为什么会出现此消息?
完成这项任务的正确方法是什么?

1 回复 | 直到 8 年前

1

Community Mohan Dere 6 年前

你可以在中找到一个很好的解释 this issue

也就是说,抛出它是有充分理由的:简而言之,在每一轮更改检测之后,dev模式立即执行第二轮,以验证自第一轮结束以来没有任何绑定发生更改,因为这将表明更改是由更改检测本身引起的。

在plunk中,您有绑定[attr.spinner]=isLoading,并且isLoading随着您对它的调用而改变。load(),在启动ngAfterViewInit时发生,这是初始更改检测回合的一部分。但这本身并不成问题——问题在于这一点。load()更改绑定,但不会触发新一轮的更改检测,这意味着该绑定在未来的某一轮更改检测之前不会更新。

完成这项任务的正确方法是什么?

只需更换 [ngClass] 具有 [class] . 我不知道为什么,但当我试图在plunker中重现你的问题时,我发现 [类别] 不会触发错误。

编辑:使用 `ng-invalid` 班

也可以根据角度类设置元素的样式 ng无效 .

this plunker

绑定到ngModel验证时,角度ngClass触发更改检测错误

完成这项任务的正确方法是什么?

编辑:使用 ng-invalid 班

编辑:使用 `ng-invalid` 班