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;
    }
);

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