Как не убрать фокус с поля ввода при изменении условия из ng-if?
У меня есть таблица, где я повторяю данные с ng-repeat
и в таблице данных у меня есть <input>
теги, в которых клиент может видеть, являются ли данные, которые он отправит на сервер, нулевыми или полными. Я хочу обнаружить его с красной линией границы, что данные являются нулевыми, но когда я начинаю печатать в пустых полях, фокус исчезает, и мне приходится снова нажимать в поле, чтобы начать печатать.
Вот код:
<tbody>
<tr ng-repeat="data in resultValue=(vm.ExcelDataDialog)" class="fade">
<td style="min-width: 2px !important;width:2px !important">
{{$index + 1}}
</td>
<td>
<input
type="text"
ng-if="data.Pershkrimi != null"
ng-model="data.Pershkrimi"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.Pershkrimi == null"
ng-model="data.Pershkrimi"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.Klienti != null"
ng-model="data.Klienti"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.Klienti == null"
ng-model="data.Klienti"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.KodiArtikullit != null"
ng-model="data.KodiArtikullit"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.KodiArtikullit == null"
ng-model="data.KodiArtikullit"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.Sasia != null"
ng-model="data.Sasia"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.Sasia == null"
ng-model="data.Sasia"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.Cmimi != null"
ng-model="data.Cmimi"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.Cmimi == null"
ng-model="data.Cmimi"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.DateFillimi != null"
ng-model="data.DateFillimi"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.DateFillimi == null"
ng-model="data.DateFillimi"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
<td>
<input
type="text"
ng-if="data.DateMbarimi != null"
ng-model="data.DateMbarimi"
style="border: 1px solid rgba(0, 0, 0, 0.12);"
id="validate_for_creating_new_ofer"
/>
<input
type="text"
ng-if="data.DateMbarimi == null"
ng-model="data.DateMbarimi"
style="border: 1px solid red;"
id="validate_for_creating_new_ofer"
/>
</td>
</tr>
</tbody>
Здесь <tbody>
, Я проверил, является ли модель нулевой, чтобы сделать границу красной, но когда я начинаю печатать, модель не null
больше и фокус идет из поля ввода. Так как я могу это исправить?
ОБНОВИТЬ!!! Я решаю это с ng-class
,
<td>
<input
type="text"
ng-model="data.Pershkrimi"
ng-class="{validate_for_creating_new_ofer: data.Pershkrimi != null, input_red: data.Pershkrimi == null}"
/>
</td>
И это scss
:
.validate_for_creating_new_ofer {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.12);
height: 5px;
padding: inherit;
border-radius: 8px;
}
.input_red {
box-sizing: border-box;
border: 1px solid red;
height: 5px;
padding: inherit;
border-radius: 8px;
}