AngularJS指示文にフォーム入力を取得できません

Question

カスタムフォーム検証を記述しようとしています。私は指示がうまく働いています。ロードされています。しかし、私はライブフォーム検証をしたい。入力要素が入力されている間に、その要素が検証されていることを確認したいということです。私の人生は、この入力フォームの結果をどのようにして取得するかを把握しているように見えます。

package.js

define([ 
     'angular', 
     'bb/checkout/form-validation/form-validation.directive' 
    ], 

    function defineFormValidationPackage(
     angular, 
     formValidation 
    ) { 

     'use strict'; 

     var module = angular.module('checkout.form-validation', []); 

     module.directive('cardFormValidation', formValidation); 

     return module; 
    } 
); 

フォームvalidation.directive.js

define(function defineFormValidation() { 
    'use strict'; 
    function formValidation() { 

     return { 
      restrict: 'C', 
      scope: { 
       addCardScope: '@' 

      }, 
      link: function ($scope, $element, $attrs) { 

       $scope.addCardScope = $scope.addCardScope || {}; 
       var city = $scope.addCardScope.city; 

       $element.on('keypress', function(event) { 
        console.log("CITY: ", $scope.addCardScope); 

       }); 
      } 
     }; 
    } 
    return formValidation; 
}); 

HTML

<form id="ccForm" class="card-form-validation customer-address-form" name="ccForm" formid="ccForm" action="" method="post"> 
    <input id="city" type="text" class="validate" ng-model="addCardScope.city" maxlength="30" /> 
    <div>{{addCardScope.city}}</div> 
</form> 

Answer 1

あなたはバインディングaddCardScope文字列を期待孤立スコープを持っていますテンプレート内のディレクティブにバインディングを渡していません。

<form id="ccForm" class="card-form-validation customer-address-form" add-card-scope="someValue">助けてください？

また、addCardScopeをオブジェクトとして使用しているようですので、@は文字列値が必要なものではありません。代わりに=バインディングが必要でしょうか？

addCardScopeが外部から渡されることは決してなく、空のオブジェクトでない場合はaddCardScope.cityが割り当てられず、常にundefinedが返されます。

カスタムフォームの検証をお探しの場合は、適切な方向にあなたを導くための例があります。あなたが今それをしようとしている方法は、それを行う最良の方法ではありません。

https://docs.angularjs.org/guide/forms#custom-validation