表单标签被移除

Question

我目前正在使用带有 X-editable 和 ui-bootstrap 的 AngularJS 编写一段代码，我的问题出在这部分代码中：

<div ng-repeat='task in CurrentOIDs | filter:criteria | orderBy:OrderField:ReverseSort'> 
    <div class='row {{!areCollapsed[task.OIDid] | selected}}' 
         style='background-color: {{ task.Status | color }};' 
         ng-click="checkCollapse(task.OIDid, !rowform.$visible);">
        <div style='width: 5%;' class='cell OIDid'>
            {{ task.OIDid }}
        </div>
        <div style='width: 5%;' class='cell'>
            <span buttons='no' onbeforesave='checkPriority($data)' 
                  editable-select="task.Priority" 
                  e-id='priorityInput' e-name="priority" 
                  e-form='rowform' 
                  e-ng-options="p.value as p.text for p in priorities">
                {{task.Priority}}
            </span>
        </div>
        <div style='width: 13%;' class='cell'>
            <span buttons='no' onbeforesave='checkTopic($data)' 
                  editable-text='task.Topic' e-name='topic' 
                  e-form='rowform' e-required e-list="Topics">
                {{ task.Topic }}
            </span>
        </div>
        <div style='width: 20%;' class='cell'>
            <span buttons='no' onbeforesave='checkCategory($data)' 
                  editable-text='task.Category' e-id='categoryInput' 
                  e-name='category' e-form='rowform' 
                  e-required e-list="Categories">
                {{ task.Category }}
            </span>
        </div>
        <div style='width: 35%;' class='cell'>
            <span buttons='no' onbeforesave='checkTask($data)' 
                  editable-text='task.Task' e-id='taskInput' 
                  e-name='task' e-form='rowform' 
                  e-required>
                {{task.Task}}
            </span>
        </div>     
        <div style='width: 6%;' class='cell'>
            {{ task.Added }}
        </div>
        <div style='width: 6%;' class='cell'>
            {{ task.Target }}
        </div>
        <div style='width: 5%;' class='cell'>
            <span buttons='no' onbeforesave='checkOwner($data)' 
                  editable-text='task.Owner' e-name='owner' 
                  e-form='rowform' e-required 
                  e-list="Owners">
                {{ task.Owner }}
            </span>
        </div>
        <div style='width: 5%;' class='cell Status'>
            <span buttons='no' onbeforesave='checkStatus($data)' 
                  editable-number='task.Status' e-min='0' 
                  e-max='100' e-name='status' e-form='rowform' 
                  e-required>
                {{ task.Status }}%
            </span>
        </div>
    </div>
    <div collapse='areCollapsed[task.OIDid]'>
        <div style='height: 30px;' ng-show='rowform.$visible'>
            <form onbeforesave='saveTask($data, task.OIDid)' 
                  editable-form name='rowform' 
                  shown="inserted == task">
                <button type='submit' ng-disabled="rowform.$waiting" 
                        id="saverowedit">
                    OK
                </button>
                <button type="button" ng-disabled="rowform.$waiting" 
                        ng-click="rowform.$cancel()" 
                        id="cancelrowedit">
                    CANCEL
                </button>
            </form>    
        </div>
        <div style='height: 30px;' ng-show='!rowform.$visible'>
            <button id='editButton' style='width: 25%;' title="Edit" 
                    ng-click="rowform.$show()">
                <?php include("svg/edit.svg")?>
            </button> 
            <button id='archiveButton' style='width: 25%;' title="Archive">
                <?php include("svg/archive.svg")?>
            </button>
            <button id='mailingButton' style='width: 25%;' title="MailingList">
                <?php include("svg/mail.svg")?>
            </button>
            <button id='historyButton' style='width: 25%;' title="History">
                <?php include("svg/history.svg") ?>
            </button>
        </div>
    </div>
</div>

由于某种原因，当我检查生成的代码时，FORM 标签被完全删除，只留下按钮，但显然如果它们不在表单标签中，它们将毫无用处。

我的问题是什么会导致这种情况发生？我该如何解决？

谢谢

Answer 1

HTML 只允许一个<form> 标签，因此你会看到

如果您使用<ng-form> 而不是<form>，它将让您克服这个障碍。

https://docs.angularjs.org/api/ng/directive/ngForm