参考模板中的当前元素（Angular 2+）

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.invalid），因此您必须将其导出为ngModel。

所以模板会是这样的：

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