即使在验证满足后,ADD按钮仍处于禁用状态

时间:2015-12-08 05:48:56

标签: javascript jquery angularjs validation

我一直在下面的屏幕上工作,我有一个下拉列表,用于选择文件/文件夹类型(文件类型是默认值)。当我首先提供有效文件路径时,ADD按钮未启用。之后,我从下拉列表中选择文件夹并提供有效的文件夹路径,然后启用ADD按钮。我认为,问题在于我正在使用的验证,即: ng-disabled =“conditionForm。$ invalid”你能告诉我我在做错误的地方!!?提供下面的代码和屏幕截图。

File Path being default.Text box accepts a valid file path only. Invalid File Path provided. Validation message displayed and ADD button still disabled Valid File Path Provided , Validation message gone.Still ADD button is disabled , where it must be enabled. Folder path selected from drop down.Valid Folder Path Provided,ADD button enabled .

                        <form name="conditionForm" class="form-horizontal" role="form" novalidate="novalidate">
                        <div class="form-group">
                            <label class="col-sm-2 control-label no-padding-right">Type :</label>
                            <div class="col-sm-3" style="width:110px">
                                <select name="fileorfoldertype" id="ddlFileOrFolderType" class="form-control" ng-init="fileorfoldertype = fileorfoldertypes[0]" style="width:100px" ng-model="fileorfoldertype" ng-options="fileorfolderpath as fileorfolderpath.name for  fileorfolderpath in  fileorfoldertypes" ng-change="change()" required></select>
                            </div>

                            <div class="form-group" id="filepath">
                                <label class="col-sm-2 control-label no-padding-right">File Path:</label>
                                <div>
                                    <div class="col-sm-3" style="border:0px solid red;">
                                        <input name="filespath" id="txtfilepath" type="text" class="form-control" ng-model="filespath" ng-pattern="/^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.txt|.doc|.xls|.gif|.GIF|.exe|.pdf|.xml|.cvv|.dll)$/" required>
                                    </div>
                                    <div class="col-sm-3">
                                        <p ng-show="conditionForm.filespath.$error.required" class="help-block" style="display: inline; float: left;">File Path is required and cannot be empty.</p>
                                        <p ng-show="conditionForm.filespath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid File Path.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" id="folderpath" style="display:none">
                                <label class="col-sm-2 control-label no-padding-right">Folder Path:</label>
                                <div>
                                    <div class="col-sm-3" style="border:0px solid red;">
                                        <input name="folderspath" id="txtfolderpath" type="text" class="form-control" ng-model="folderspath" ng-pattern="/^([A-Z|a-z]:\\[^*|><>?\n]*)|(\\\\.*?\\.*)$/" required>
                                    </div>
                                    <div class="col-sm-3">
                                        <p ng-show="conditionForm.folderspath.$error.required" class="help-block" style="display: inline; float: left;">Folder Path is required and cannot be empty.</p>
                                        <p ng-show="conditionForm.folderspath.$error.pattern" class="help-block" style="display: inline; float: left;">The input is not a valid Folder Path.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div id="addbutton" class="col-sm-3" style="padding-left:590px;">
                                <button style="width:70px" class="btn" type="submit" ng-disabled="conditionForm.$invalid" ng-click="add()">
                                    Add
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-10">

                                <div class="col-sm-10 mail-container">

                                    <div class="mail-header">
                                        <ul class="header-buttons">
                                            <li>
                                                <a class="tooltip-primary" ng-click="deleteCondition()"><i class="glyphicon glyphicon-remove"></i></a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-sm-10" id="divGrid">
                                    <table id="jQFileManagement"></table>
                                    <div id="jqGridPager"></div>
                                </div>

                            </div>
                        </div>
                    </form>





      $scope.fileorfoldertypes = [
    { id: "0", name: "File" },     
    { id: "1", name: "Folder" },
];

  $scope.change = function () {
   if ($scope.fileorfoldertype.id === '0')
      {
          $("#folderpath").hide();
          $("#filepath").show();
          document.getElementById('txtfilepath').value = "";
          document.getElementById('txtfolderpath').disabled = true;
          document.getElementById("txtfilepath").disabled = false;
      }
   else if ($scope.fileorfoldertype.id === '1') {
        $("#folderpath").show();
        $("#filepath").hide();
        document.getElementById('txtfolderpath').value = "";
        document.getElementById('txtfilepath').disabled = true;
        document.getElementById("txtfolderpath").disabled = false;            
    }       
}
$scope.add = function () {
    var filetype;
    if ($scope.fileorfoldertype.id == "1") {
        filetype = 1;
        folderOrFilePath = $scope.folderspath;
        var folderdata = {
            typeId: filetype,
            folderOrFilePath: $scope.folderspath
        }
    }
    else {
        filetype = 2;
        folderOrFilePath = $scope.filespath;
        var folderdata = {
            typeId: filetype,
            folderOrFilePath: $scope.filespath
        }
    }

    selectedfolders.unshift(folderdata);
    if (selectedfolders != "") {
        $("#jQFileManagement")
           .jqGrid('setGridParam',
       {
           datatype: 'local',
           data: selectedfolders
       })
       .trigger("reloadGrid");
    }
    $scope.filespath = '';
    $scope.folderspath = '';
    $scope.conditionForm.$invalid = true;
};

0 个答案:

没有答案