在 angularjs 中动态命名输入控件 [英] dynamically naming input controls in angularjs

问题描述

我有一个想要动态命名的输入元素，但到目前为止我没有使用 angular js.

I have a input element which I am trying to name dynamically, but I had no luck so far using angular js.

都没有

<input type="text" name="resource.Name" ng-model="resource.Value" ng-required="resource.IsRequired">

也没有

<input type="text" name="{{resource.Name}}" ng-model="resource.Value" ng-required="resource.IsRequired">

对我有用.当我尝试访问 name 属性时，它总是作为 resource.Name 而不是它包含的值返回.我试图命名这个输入控件的主要原因是验证，如果用户没有在字段中输入文本，我想告诉他们需要哪个文本框.如果我可以为此目的使用任何角度指令，我也准备好使用它们.

works for me. When I try to access name attribute it always comes back as resource.Name instead of the value it contains. The main reason I am trying to name this input control is validation, if user does not enter text in the field, I would like to tell them which textbox is required. If there is any angular directive I can use for that purpose I am ready to use them as well.

谁能告诉我如何实现这一目标.

Can anyone tell me how to achieve this.

我的验证函数如下:

 window.resourcesValidation = function ($scope, $rootScope, $alert) {
        var subscriptions = $scope.scopeData.Subscriptions;
        var isValidated = true;

        if ($scope.resourceDataForm && $scope.resourceDataForm.$error && $scope.resourceDataForm.$error.required) {
            var missingFields = [];
            angular.forEach($scope.resourceDataForm.$error.required, function (value, key) {
                isValidated = false;
                missingFields.push("-" + value.$name);
            });

            $alert.error("Please fill in the all required fields.\r\n" + missingFields.join("\r\n"));
        }

        if (isValidated)
            $scope.saveChanges(subscriptions);

        return isValidated;
    };

推荐答案

在一个非常相似的问题上引用另一个答案:

Quoting another answer on a very similar issue:

发生这种情况是因为在 ngModelController 的实例化过程中检索了控件的名称(在其父窗体上注册的名称)，根据文档 发生在预链接阶段之前*(所以还没有插值).

This happens because the control's name (the one with which it is registered on its parent form) is retrieved during the ngModelController's instantiation, which according to the docs takes place before the pre-linking phase* (so no interpolation yet).

<小时>

换句话说，验证依赖于 forms.$error 对象，该对象绑定到使用该表单注册的控件.
控件的 ngModelController 负责向其父窗体注册控件，并在预链接阶段(当名称表达式尚未插入时)对其进行实例化.

---

In other words, validation relies on forms.$error object, which is bound to the controls that are registered with that form.
A control's ngModelController is responsible for registering a control with its parent form and it is instantiated at the pre-linking phase (when the name-expression is not interpolated yet).

这可以通过自定义指令解决，该指令手动将控件注册到其父窗体，但只有在确定其实际名称之后(插入名称表达式之后).

This can be solved by a custom directive that manually registers the control with its parent form, but only after it's actual name is determined (after insterpolating the name-expression).

您可以在这里找到完整的答案.
查找 UPDATE 2 部分以获得可行的解决方案.

You can find the whole answer here.
Look for the UPDATE 2 section for a working solution.

(这是工作演示的链接.)

(This is the link to the working demo.)

这篇关于在 angularjs 中动态命名输入控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！