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">