web-dev-qa-db-ja.com

フォーム入力にフォーカスがあるかどうかを判別

私はAngularJSで検証を行っており、3種類のエラーがある場合に表示されるdivがあります。

必須の場合、ページが空の値で送信された場合にのみエラーメッセージを表示したい

<div class="error" data-ng-show="submitted && mainForm.email.$error.required" />

正規表現の検証のために、リアルタイムのデフォルトの動作にフラグを立ててほしい。

<div class="error" data-ng-show="mainForm.email.$error.pattern" />

私が直面している問題は、最小長です。入力中は表示したくありません。入力が終わっていないのは面倒です。送信時にも表示したくありません。手遅れだと思います。要素の焦点が合っていないときに表示したいと思います。

//mainForm.email.$focusが存在する場合、これを行うことができます

<div class="error" data-ng-show="mainForm.email.$error.minlength && 
!mainForm.email.$focus"/>

この種のチェックを行う方法、または引き出しのない代替手段を知っている人はいますか？

ありがとう！

angularjsvalidationfocusonchange
25
Proximo

はい、そうです
この目的でngFocusとngBlurを使用できます

ここにコードがあります

<form name="mainForm">
    <span ng-show="mainForm.email.$error.pattern && !focus">error here</span>
    <input name="email" ng-pattern="..." ng-focus="focus=true" ng-blur="focus=false" type="text" />
</form>

ngFocusとngBlurは式を取り、ngShowは真の評価時に表示します

49
Sahu

ModelOptionsについて読む必要があります。debounceとupdateOnはモデル変更トリガーイベントを遅らせるか、DOMイベントでトリガー変更をトリガーできます https://docs.angularjs.org/api/ng/directive/ngModelOptions

ページの例を確認してください

<div ng-controller="ExampleController">
  <form name="userForm">
    Name:
    <input type="text" name="userName"
           ng-model="user.name"
           ng-model-options="{ updateOn: 'blur' }"
           ng-keyup="cancel($event)" /><br />

    Other data:
    <input type="text" ng-model="user.data" /><br />
  </form>
  <pre>user.name = <span ng-bind="user.name"></span></pre>
</div>
5
Issam Zoli

別の簡単なオプションは次のとおりです。

 <input type="text"
        name="searchText"
        ng-model="searchText"
        ng-blur="searchIsInActive()"
        ng-click="searchIsActive()"                  
        placeholder="Search">
0
Arsen Khachaturyan