AngularJS无法将表单输入输入指令

Posted 2023-05-09

【中文标题】AngularJS无法将表单输入输入指令

【英文标题】：AngularJS Can not get form input into directive

【发布时间】：2017-03-03 02:02:30

【问题描述】：

我正在尝试编写一些自定义表单验证。我的指令工作正常。它正在加载。但我想做实时表单验证。这意味着在输入输入元素时，我想确保它经过验证。我似乎无法弄清楚如何获得这个输入表单的结果，以便指令可以看到它。

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>

【参考方案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

【讨论】：

不幸的是，我们目前使用的是 Angular 1.2.30，还没有到可以升级的地步。我查看了 1.2.30 的表单文档，看来他们并没有按照我试图完成此操作的方式进行操作。

我已经从表单中删除了指令，并决定为每个单独的表单元素设置一个指令可能会更清晰，因为每个字段都有不同的表单验证。所以标记现在是这样的。 <input id="city" type="text" class="validate bb-form-validation-city" ng-model="addCardScope.city" maxlength="30" /> <div>addCardScope.city</div>