更改$ invalid或必需的dxtagbox angularjs

时间:2017-04-13 17:44:20

标签: javascript angularjs devexpress required devextreme

我正在尝试使用$ invalid验证表单,我甚至不需要一个控制器,这对于输入和复选框很好用,但是当我使用devextreme小部件时,它似乎失败了。

这是我的简单表格

<form name="step1" role="form" novalidate>
    <div id="Chk1" class="checkBox" dx-check-box="Chk1_Options" name="Chk1" value="Values.Chk1" ng-model="Values.Chk1" ></div>
    <div dx-tag-box="tag_options" id="Tag_Options" name="Tag_Options" ng-model="Values.Tag_Options" ></div>
    <p class="help-block">
        <span ng-show="step1.Tag_Options.$invalid ">Select at list One Option</span>
    </p>
    .....
</form>

在我的控制器中

app.controller("Controller1", ['$rootScope', '$scope', '$http', '$location', '$window', 
function ($rootScope, $scope, $http, $location, $window ) {

    ...

    $scope.Values = {};
    $scope.Tag_Options_disabled=true;

    $scope.Chk1_Options = {
        text: "Check if Need it",
        value: false,
        onValueChanged: function (info) {
            // When the new value is Checked
            if (info.value) {
                // Enable the TagBox using bindingOptions on Tag_Options
                $scope.Tag_Options_disabled=true;
                // Reset TagBox Contaier
                $scope.Tag_Options_instance.reset();
                // Also Clear Values
                $scope.Values.Tag_Options=null;
                // ********** I need to make it "required". ********** 
                document.getElementById("Tag_Options").required = true;
            } else {
                // ****** if I deselect CheckBox then I need to make it NOT required so the form can be Valid ****** 
                document.getElementById("Tag_Options").required = false;
                // Then Disable the TagBox using bindingOptions on Tag_Options
                $scope.Tag_Options_disabled=true;
                // Reset TagBox Contaier in case something was there
                $scope.Tag_Options_instance.reset();
                // Also Clear Values
                $scope.Values.Tag_Options=null;
            }

        }
    }


    $scope.Tag_Options = {
        datasource: data,
        valueExp: "Id",
        displayExpr: "Ítem_Name",
        showSelectionControls: true,
        bindingOptions: {
            disabled: 'Tag_Options_disabled'
        },
        onInitialized: function (e) {
            $scope.Tag_Options_instance = e.component;
        }

    }


}

我试过

  • document.getElementById(“xxx”)。setAttribute(“required”,true);

  • tag_Options.attributes [“aria-invalid”]。value = true; &lt;&lt; - 我不知道为什么这个元素被创建但它出现在对象的属性上

最后它只在我第二次检查复选框时工作,但即使它工作原理我找不到正确的属性来初始化它并使它从第一次开始工作。

任何人都可以帮助我,我已经工作了3天,我放弃了。

0 个答案:

没有答案