动态模板驱动表单的HandingError验证-Angular

Question

我试图为一个动态表单附加一个错误处理

我可以得到行为，但我得到了

ExpressionChangedAfterItHasBeenCheckedError:检查表达式后，表达式发生了更改。上一个值："null"。当前值："true">

如何优雅地处理这类问题。还有其他更好的方法吗？

Answer 1

Angular将在表单处于无效状态时自动添加ng个无效类。您可以使用它来设置元素样式，而不是使用ngClass。

component.css

.ng-invalid:not(form)  {
border-left: 5px solid #a94442; /* red */
}

分叉工作示例

Answer 2

也许你可以这样做：

<input
type="number"
[class.error]="!data.val"
step="any"
#valBox="ngModel"
required
(ngModelChange)="changedInput($event)"
[(ngModel)]="data.val"
/>