AngularJS - タッチして空白の場合のみ表示div

Question

入力フィールドにタッチしてまだ空の場合のみ、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が完全に表示されます。

Answer 1

で

ルックは、あなたのタスクを達成するために、あなたの入力コントロールに名前プロパティを設定する必要があります。 はまた、あなたは$がloginForm.userNameのように触れた。$が

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

はそれが役に立てば幸いに触れアクセスする必要があります！

Answer 2

入力フィールドにng-focusとng-blurイベントを使用できます。このpen