Угловая форма не работает в таблице

Я создал рабочую форму, помещенную в div под таблицей;

<div class="row">
  <form class="form-signin" ng-submit="controller.add.save()">
    <h2 class="form-signin-heading">Add an item:</h2>
    <label for="inputName" class="sr-only">Name</label>
    <input type="text" name="name" id="inputName" class="form-control" placeholder="Name" required autofocus ng-model="controller.add.name">
    <label for="inputDescription" class="sr-only">Description</label>
    <textarea name="description" id="inputDescription" class="form-control" placeholder="Description" ng-model="controller.add.description">
    </textarea>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Add</button>
  </form>
</div>

Затем я решил переместить форму в таблицу выше;

<tr>
  <form ng-submit="controller.add.save()">
    <td>Add an 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">Add</button></td>
  </form>
</tr>

Но теперь форма больше не работает. Что я делаю не так?


forms html angularjs html-table angularjs-forms
person Morten Nilsen    schedule 23.12.2015    source источник

Ответы (1)


arrow_upward
13
arrow_downward

То, как вы это делаете, не будет правильно отображать html на странице, потому что это недопустимый html в соответствии со стандартами таблиц. По сути, за сценой рендерер html выбрасывает это из тега table при рендеринге html на странице. Таким образом, для наличия формы внутри тега таблицы вы можете использовать атрибут ng-form вместо элемента form.

Но с помощью директивы ng-form вы не можете ng-submit, вы должны отправлять форму только через button.

HTML

<tr ng-form="myForm">
    <td>Add an 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="button" ng-click="controller.add.save()">Add</button></td>
</tr>

Для получения более подробного ответа о структурировании таблицы вы можете обратиться к этот ответ

person Pankaj Parkar    schedule 23.12.2015
comment
@MortenNilsen, вы не могли использовать ng-submit, так как изменили директиву form тега ng-form.. - person Pankaj Parkar; 24.12.2015