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