Запуск проверки угловой формы из обработчика кликов

У меня есть форма, которая была перемещена в таблицу, потеряв встроенные функции проверки формы, поскольку я не могу использовать ng-submit:

<tr ng-form="controller.add.form">
  <td>New item</td>
  <td><input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name"></td>
  <td><textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea></td>
  <td><button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save()">Save</button></td>
</tr>

Вот так выглядит мой контроллер:

.controller('ObjectController', ['ObjectService', function(ObjectService)
{
  var objects = this;
  objects.entries = [];
  objects.add = {
    name: '',
    description: '',
    save: function()
    {
      if(!objects.add.form.$valid) return;
      ObjectService.create(
        {name: objects.add.name, description: objects.add.description},
        function(r)
        {
          if(r && 'name' in r)
          {
            objects.add.name = '';
            objects.add.description = '';
            objects.entries.push(r);
          }
        }
      );
    }
  };
  ObjectService.read({}, function(r) { objects.entries = r; });
}])

Как я могу заставить метод сохранения запускать проверку со стандартными всплывающими окнами при нажатии?


angularjs angularjs-controller angularjs-forms
person Morten Nilsen    schedule 23.12.2015    source источник
comment
Вы собираетесь использовать $http.POST с сохранением отправки?   -  person AndreaM16    schedule 24.12.2015
comment
Метод сохранения вызывает службу angular   -  person Morten Nilsen    schedule 24.12.2015
comment
@MortenNilsen Не могли бы вы опубликовать код контроллера?   -  person pratikpawar    schedule 24.12.2015
comment
Пожалуйста, проверьте ответы в Инициировать проверку всех полей в отправке формы Angular< /а>   -  person Artem    schedule 24.12.2015
comment
@Artem, если я вызову $setSubmitted(), всплывающие окна не появятся, но я смогу правильно прочитать $valid.   -  person Morten Nilsen    schedule 24.12.2015

Ответы (2)


arrow_upward
0
arrow_downward

Из справочника API AngularJS:

целью ngForm является группировка элементов управления, но не замена тега <form> со всеми его возможностями (например, отправка на сервер,...).

ngForm позволяет создавать «группы форм» внутри основной родительской формы, что позволяет проверять поля внутри группы по отдельности. Таким образом, вы должны окружить ng-форму <form> или даже потерять ng-форму, если вам не нужна проверка по группам.

person Yaniv Shiloah    schedule 23.12.2015
comment
Я не могу окружить это формой из-за того, что это строка таблицы - форма вообще не работает из-за недопустимого html. - person Morten Nilsen; 24.12.2015
comment
Возможно, вы можете окружить всю таблицу <form> или использовать CSS, который имитирует макет тега TABLE: display:table, display:table-row и display:table-cell. Чтобы использовать встроенную проверку и ng-submit, вам нужно использовать тег <form> на данный момент. Это известная проблема: github.com/angular/angular.js/issues/2513 - person Yaniv Shiloah; 24.12.2015
comment
выкладка табличных данных без таблицы кажется мне неудачной. Также неправильно делать всю таблицу единой формой. Я предполагаю, что мне просто придется полностью отказаться от обратной связи. - person Morten Nilsen; 24.12.2015

arrow_upward
0
arrow_downward

Вам нужно будет передать форму обработчику кликов.

Предполагая, что ваша форма имеет имя «myForm», измените ng-click на:

ng-click="controller.add.save($event, myForm)"

И в вашем контроллере:

    save : function(event, form) {
            if (form.$invalid) {
                console.log('invalid');
            } else {
                console.log('valid');
            }
        }

Только что заметил ваш комментарий о том, что не используется элемент формы - как сказал Янив, просто окружите таблицу элементом формы:

<form name="myForm" novalidate>
    <table>
        <tr ng-form>
            <td>New item</td>
            <td>
                <input type="text" name="name" id="newName" class="form-control" placeholder="Name" required ng-model="controller.add.name">
            </td>
            <td>
                <textarea name="description" id="newDescription" class="form-control" placeholder="Description" ng-model="controller.add.description"></textarea>
            </td>
            <td>
                <button class="btn btn-xs btn-primary" type="submit" ng-click="controller.add.save($event, myForm)">Save</button>
            </td>
        </tr>
    </table>
</form>

Демо http://plnkr.co/edit/qKFs3q?p=preview

person Chris    schedule 23.12.2015
comment
У меня есть некоторые опасения по поводу размещения формы вокруг таблицы, поскольку таблица содержит скрытые элементы ввода, используемые для редактирования строк по требованию. Это мое первое угловое приложение, поэтому мои опасения могут быть неуместны без моего ведома. - person Morten Nilsen; 24.12.2015
comment
Не видя всего вашего приложения, я не думаю, что при этом должны быть какие-то проблемы. В качестве альтернативы вы можете попробовать передать каждый из входных данных вашей функции сохранения (например, controller.add.save($event, name, description) и проверить угловые свойства для каждого элемента, такого как name.$invalid. Я не пробовал что раньше от контроллера, но подозреваю, что он должен работать. - person Chris; 24.12.2015