Angular：引用模板中的当前元素

Question

我有一个包含多个输入的表单。 我想分别验证每一个，并在输入包含无效值时添加一个类（例如， is-invalid ）。 我知道 Angular 将ng-invalid添加到输入类列表中，但由于 Bootstrap 需要另一个类来显示错误，我想添加 Bootstrap 的类。

有没有办法在 Angular 中引用当前元素？ 我正在使用 Angular 5。我的模板：

<input [(ngModel)]="test" name="test" required [class.is-invalid]="thisElement.invalid && thisElement.touched">
                                                                   ^^^^^^^^^^^

引用当前元素（代码片段中的thisElement ）的东西是我正在寻找的。 它存在吗？

Answer 1

要引用相同的元素，您可以使用#thisElement ，其中“thisElement”可以是您选择的任何名称。 由于您需要从它所代表的模型（ thisElement.invalid ）访问某些属性，因此您必须将其导出为ngModel 。

所以模板将是这样的：

<input #thisElement="ngModel" [(ngModel)]="test" name="test" required [class.is-invalid]="thisElement.invalid && thisElement.touched">