angularjsangularjs-scopeangular-uiangular-ui-gridangular-ui-modal

Angular-ui validation not working in model window


I am working on AngularJS with ui-grid. In the grid when i edit a row I am opening a modal window like this

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

and the model window gets open with the row details after calling Editcontroller default function. Until this point it is working fine. Now i am trying to do the validation on the opened modal window using AngularUI and the validation is not working. Below is my UI page where the validation is not working

<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>

Somebody please help me how to do the validation. one more thing if i open the modal window normally the validation is working but i have the issue when i edit the row. I think this is a scope issue and the child scope is not getting bind. Your help is very much appreciable.


Solution

  • Finally, I am able to find the solution

    in EditController add below code

    $scope.form={};
    

    and your form should have form.myform like this

    <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>
    

    I am posting this becoz it may be helpful someone..