Question

我正在使用ui-grid处理AngularJS。在网格中，当我编辑一行时，我打开一个像这样的模态窗口

$scope.editRow = function(row){     
    var modalInstance = $modal.open({
        templateUrl : contextPath+ '/row/edit',
        controller : 'EditController',
        size : 'lg',
        scope: $scope,
        resolve : {
            result : function() {
                return row;
            }
        }
    }); 
    modalInstance.result.then(function() {
    .......
    });
}

在调用Editcontroller默认函数后，模型窗口打开并显示行详细信息。在此之前，它工作正常。现在我尝试使用AngularUI在打开的模态窗口上进行验证，验证无效。以下是验证无效的UI页面

<div class="modal-content">
<div class="modal-header">      
    <h4 class="modal-title"></h4>
    <h3 align="center">Edit Row Details</h3>
</div>

<div class="modal-body">
    <form class="form-horizontal" name="myform" ng-submit="submitForm(myform.$valid)" novalidate>
            <!-- Content Start -->
            <div class="container">
                <div class="row">
                        <div class="form-group required"
                            ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
                            <label for="name" class="control-label"> Name
                            </label>
                            <div>
                                <input type="text" name="myform.name" class="form-control input-sm"
                                    ng-model="myform.name" placeholder="Name"
                                     required />
                                     <p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>

                            </div>
                        </div>
                </div>
                <div class="row">
                        <div class="form-group">
                            <div>
                                <button type="submit" ng-model="myform.save"  ng-disabled="myform.$invalid"
                                    class="btn btn-primary" ng-click="edit(myform)">EDIT</button>
                            </div>
                        </div>
                </div>
            </div>
                <!-- Content End -->
    </form>
</div>

有人请帮我验证如何进行验证。还有一件事，如果我打开模态窗口通常验证工作，但我有问题，当我编辑行。我认为这是一个范围问题，并且子范围没有得到绑定。你的帮助非常明显。

Answer 1

您不需要在输入的名称中包含表单名称，它在表单中，因此输入已经绑定到该表单。我还建议您将ng-model绑定到示波器上的另一个对象（在我使用的模型下面），而不是表单本身。

你会这样写的。

<div class="row">
   <div class="form-group required"
        ng-class="{ 'has-error' : myform.name.$invalid && !myform.name.$pristine }">
         <label for="name" class="control-label"> Name </label>
         <div>
              <input type="text" name="name" class="form-control input-sm"
                                ng-model="model.name" placeholder="Name"
                                 required />
               <p ng-show="myform.name.$invalid && !myform.name.$pristine" class="help-block"> Name is required.</p>

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

此外，我还要将ng-submit更改为以下

<form class="form-horizontal" name="myform" ng-submit="myform.$valid && submitForm()" novalidate>

Angular-ui验证在模型窗口中不起作用

1 个答案: