动态地添加需要的属性来选择元素 [英] Dynamically adding required attribute to select element

问题描述

我试图线了一个适配器启用ASP.Net MVC发出的客户端验证到AngularJS中工作的标记，我遇到了一个有趣的障碍。如果我通过动态指令添加要求属性编译功能：

I'm attempting to wire up an adapter to enable the markup that ASP.Net MVC emits for client-side validation to work within AngularJS, and I've encountered an interesting snag. If I dynamically add the required attribute via a directive compile function:

var myApp = angular.module('myApp', []).directive('valRequired', function() {
    return {
        compile: function (element) {

            element.attr('required', 'required');

            return function() { /* other custom logic here */ }
        }
    };
});

根据需要选择元素不会验证。它只是似乎是在动态添加属性的问题（的jsfiddle ）。

The select element won't validate as required. It only appears to be a problem when dynamically adding the attribute (jsFiddle).

澄清：我想使用MVC的 @ Html.TextBoxFor（...）原样。对于基于DataAnnotations模型，在数据-VAL - * 属性它发出的包含在其验证运行和错误消息应该是什么样的信息。我不是在寻找援助接线了错误信息，我只需要能够连线了一个指令，它告诉输入，选择等，使用要求验证。

Clarification: I'd like to use MVC's @Html.TextBoxFor(...) as-is. For a DataAnnotations-based model, the data-val-* attributes it emits contain information on which validations to run and what the error messages should be. I'm not looking for assistance wiring up the error messages, I just need to be able to wire up a directive that tells the input, select, etc. to use the required validation.

推荐答案

让我开始了与这并不是pretty，但它的作品。我尝试不同的方法来获得原生指令工作，但无济于事。它看起来像由该指令执行为时已晚的时间。

Let me start out with this isn't pretty, but it works. I tried different ways to get the native directive to work, but to no avail. It looks like by the time this directive executes it is too late.

这会显得你的数据-VAL要求的属性，并添加验证的元素。

This will look for your data-val-required attribute and add validation to the element.

这将触发所有相同的东西，所以 myForm.mySelect。$有效将仍然工作以及 myForm.mySelect。$错误。需要

It will trigger all of the same things so myForm.mySelect.$valid will still work as well as myForm.mySelect.$error.required

http://jsfiddle.net/TheSharpieOne/knc8p/

var myApp = angular.module('myApp', []).directive('valRequired', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, elm, attr, ctrl) {
            if (!ctrl || !attr.valRequired) return;
            attr.required = true; // force truthy in case we are on non input element

            var validator = function (value) {
                if (attr.required && (value == '' || value === false)) {
                    ctrl.$setValidity('required', false);
                    return;
                } else {
                    ctrl.$setValidity('required', true);
                    return value;
                }
            };

            ctrl.$formatters.push(validator);
            ctrl.$parsers.unshift(validator);

            attr.$observe('required', function () {
                validator(ctrl.$viewValue);
            });
        }
    };
});


function MyCtrl($scope, $http) {
    $scope.model = {
        property: ''
    };
}

这篇关于动态地添加需要的属性来选择元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！