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

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

所以模板会是这样的：

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