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

Question

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

$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() {
    .......
    });
}

并且模型 window 在调用 Editcontroller 默认函数后打开并显示行详细信息。到目前为止，它工作正常。现在我正在尝试使用 AngularUI 对打开的模态 window 进行验证，但验证不起作用。下面是我的 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>

有人请帮助我如何进行验证。如果我正常打开模式 window，还有一件事，验证工作正常，但我在编辑该行时遇到问题。我认为这是一个范围问题，子范围没有绑定。非常感谢您的帮助。

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>

Answer 2

终于找到解决方法了

在EditController中添加以下代码

$scope.form={};

你的表单应该有 form.myform 这样的

<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="form.myform"
        ng-submit="submitForm(form.myform.$valid)" novalidate>
        <!-- Content Start -->
    <div class="container">
        <div class="row">
        <div class="form-group required"
            ng-class="{ 'has-error' : form.myform.name.$invalid && !form.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="form.myform.name.$invalid && !form.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="form.myform.$invalid" class="btn btn-primary"
                    ng-click="edit(myform)">EDIT</button>
            </div>
        </div>
    </div>
</div>
    <!-- Content End -->
</form>
</div>

我发布这个是因为它可能对某人有帮助..

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

Angular-ui validation not working in model window

angularjs

angular-ui

angularjs-scope

angular-ui-grid

angular-ui-modal