Я пытаюсь показать div, только если поле ввода коснулось и все еще пусто.

Я пробовал следующий код, но div не появляется. Я думаю, что по какой-то причине он не может прочитать состояние прикосновения.

Есть идеи, что я делаю не так?

<div class="col-xs-12 mainbox" >
<form name="loginForm">
    <div class="spacing"></div>
      <h5>Please input your data:</h5>
      <input ng-model="vm.username" type="text" placeholder="Username" class="form-control input-md">
      <div class="spacing">
          <div class="alert alert-danger" ng-if="!vm.username && vm.username.$touched">
              Please put your username!
          </div>
      </div>
      <input id="textinput" name="textinput" type="text" placeholder="Κωδικός" class="form-control input-md">
      <div class="spacing"></div>
      <button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Είσοδος</button>
</form>

PS . Когда я удаляю условие $ touch, div показывается идеально, только если введенное имя пользователя пусто.

0
Simos Fasouliotis 27 Май 2017 в 19:00

2 ответа

Лучший ответ

Вы должны установить свойство name для вашего элемента управления вводом, чтобы выполнить вашу задачу. Также вам нужно получить доступ к $ touch, например loginForm.userName. $ Touch

<form name="loginForm">
<div class="spacing"></div>
  <h5>Please input your data:</h5>
  <input ng-model="vm.username" name="userName" type="text" placeholder="Username" class="form-control input-md">
  <div class="spacing">
      <div class="alert alert-danger" ng-if="!vm.username && loginForm.userName.$touched">
          Please put your username!
      </div>
  </div>
  <input id="textinput" name="textinput" type="text" placeholder="Κωδικός" class="form-control input-md">
  <div class="spacing"></div>
  <button id="singlebutton" name="singlebutton" class="btn btn-info btn-sm pull-right">Είσοδος</button>

Надеюсь, это поможет!!

0
Jayakrishnan 27 Май 2017 в 16:12

Вы можете использовать ng-focus и ng-blur событие в поле ввода.

Посмотрите на эту ручку

0
Anurag Awasthi 27 Май 2017 в 16:13