1

Я работаю над AngularJS с ui-сеткой. В сетке, когда я отредактировать строку Я открываю модальное окно, как этотУгловая-ui проверка не работает в окне модели

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

кто-нибудь пожалуйста, помогите мне, как сделать проверку. еще одна вещь, если я открываю модальное окно, как правило, проверка работает, но у меня есть проблема, когда я редактирую строку. Я думаю, что это проблема с областью видимости, а охват дочернего объекта не связан с привязкой. Ваша помощь очень заметна.

ответ

0

Наконец, я смог найти решение

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

Я отправляю это becoz может быть полезным кому-то ..

0

Вам не нужно включать имя формы в имя ввода, оно находится в форме, так что вход привязан к этой форме уже. Я также рекомендовал бы привязать вашу ng-модель к другому объекту в вашей области (ниже, я использовал модель), а не к самой форме.

Вы должны написать это следующим образом.

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

Также я изменил бы нг-представить следующим

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

+0

Он до сих пор не работает. Я думаю, что это связано с проблемой области, которая не привязана к модальному окну. –

+0

Можете ли вы распечатать объект myform '{{myform}}' и предоставить результат. – KieranDotCo

+0

{{myform}} печатает это {"name": "raju"} –

Смежные вопросы