23

これが重複していないことを願っています-同様の質問がたくさんありますが、うまくいく答えが見つかりません.

したがって、Angular ディレクティブがあります。

app.directive('emailInput', function(){
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        link: function(scope, elem, attrs, ctrl){
            elem.bind('keyup', function(){
                // TODO - what?
            })
        }
    }
}

そしてテンプレートhtmlで：

<input type="email" required ng-model="emailAddress" />

関数内のフォームの名前を知らなくても、プロパティlinkの値を知りたいのですが、どうすれば取得できますか?emailAddress.$valid

4

6 に答える 6

33

フォームに登録されているすべての入力にアクセスできる formController を要求できます。

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.emailAddress.$valid //check validity
          })
      }
  }
}

Angular は入力要素を名前で追跡することに注意してください。したがって、入力に name 属性を指定する必要があります

<input type="email" required ng-model="emailAddress" name="emailAddress" />

また、ディレクティブ属性を介してこれらすべてを渡すこともお勧めします。おそらく、フィールド名をハードコーディングしたくないでしょう。したがって、妥当性を取る属性を持つことができます

inputIsValid='formName.emailAddress.$valid'

そして、ディレクティブで評価 (または $watch) します。

于 2013-10-16T21:34:49.627 に答える
2

入力要素の名前を知らなくても、妥当性をより簡単にチェックできます。

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.$valid //check validity here
          })
      }
  }
}
于 2015-09-29T10:48:15.460 に答える
1

これは古い投稿ですが、グーグルでここにたどり着いた人にとって、これは名前を知らなくてもディレクティブの入力の有効性をチェックする最もクリーンな方法であるため、任意の入力要素でディレクティブを使用できます。

ngModelコントローラーを必要とするだけです：

app.directive('emailInput', function(){
  return {
    require: 'ngModel'
    restrict: 'E',
    templateUrl: 'template.html',
    link: function(scope, elem, attrs, ngModelCtrl){
      elem.bind('keyup', function(){
          ngModelCtrl.$valid //check validity
      })
    }
  }
}

$validProperties セクションのngModel.NgModelController の AngularJS ドキュメントを参照してください。

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

于 2016-01-19T05:47:07.057 に答える
0

何も入力されていない場合でも、dirty を true に設定するディレクティブを次に示します。

デフォルトでは、何かが入力された場合に $dirty が設定され、ユーザーが送信するまで必要なエラー メッセージが表示されません。これとともに

function() {
    return function (scope, element, attrs) {
        $(element).blur(function () {
            scope.$apply(function() {
                var field = scope.$eval(attrs.makeDirty);
                field.$dirty = true;
            });
        });
    };

HTML:

<label class="fieldLabel" for="confirmEmail">Confirm Email*</label>
<input type="text" id="confirmEmail" name="confirmEmail" ng-model="confirmEmail" ng-pattern="{{Ctrl.Model.Email.EmailAddress}}" required make-dirty="form.confirmEmail">
<span class="error" ng-show="form.confirmEmail.$error.pattern && form.confirmEmail.$dirty">Emails must match</span>
<span class="error" ng-show="form.confirmEmail.$error.required && (form.$submitted || form.confirmEmail.$dirty)">Confirm your email</span>

これにより、ユーザーがフォームに入力したり、タブで移動したりするときに、フィードバックを提供できます。

于 2016-12-15T11:58:38.147 に答える