Как не убрать фокус с поля ввода при изменении условия из 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;
}

0 ответов

Другие вопросы по тегам