AngularJS/HTML5 嵌套表单验证答案

【问题标题】：AngularJS/HTML5 Nested Form validationAngularJS/HTML5 嵌套表单验证
【发布时间】：2017-01-26 09:13:35
【问题描述】：

我是 AngularJS 新手，我在正确使用 HTML5 嵌套表单验证时遇到问题。

我有 2 个表单，一个是 mainFrm（父表单），另一个是 stateFrm（子表单）。我在自己的范围内验证每个表单时遇到问题。

<form id="mainFrm" ng-submit="save()">

    <text-input form="mainFrm" required type="text">

    <form id="stateFrm" ng-submit="addState()">

        <input form="stateFrm" type="text">

        <!-- this wont add an item if input-text is empty--> 
        <!-- prompts html5 validation-->  
        <button form="stateFrm" type="submit">Add state to favorite</button>

        <!-- and a list of favorite states -->

    </form>

    <!-- (Will validate only the text-input of mainFrm if empty) -->
    <button type="submit">Save</button>
</form>

执行此操作时，stateFrm 的提交按钮不起作用。该表单的 ng-submit="" 不会触发，输入为空时没有验证提示。

这是工作的DEMO

注意：我使用了 angular-material 设计

【问题讨论】：

“stateFrm 的提交按钮无法正常工作”是什么意思？预期结果与实际结果如何？
将 stateFrm 从 mainFrm 中取出
@Fissio 我的意思是 stateFrm 的按钮不会触发vm.addItem(state) 预期的一个是如果为空则将进行验证，否则将项目添加到列表中
@MMK 为了用户，我不能这样做。
@ShiftN'Tab HTML5 中不允许嵌套表单。见stackoverflow.com/questions/26536861/…

标签： javascript angularjs forms validation angular-material

【解决方案1】：

虽然 HTML5 中不允许嵌套表单，但您可以在保持相同布局的同时分离表单。在此处查看 codepen 以获取工作示例：http://codepen.io/anon/pen/YNrGrp

<form id="mainFrm" name="mainFrm" layout="column" ng-submit="vm.saveMain()">
  <md-input-container>
    <label for="name">Group name</label>
    <input type="text" required ng-model="group" />
  </md-input-container>
</form>

<form layout="column" name="stateFrm" layout-align="start" id="stateFrm" ng-submit="vm.addItem(state)">
  <md-input-container>
    <input required form="stateFrm" type="text" ng-model="state" aria-label="state item" placeholder="enter state"/>
  </md-input-container>
  <md-button form="stateFrm" class="md-raised" type="submit">Add state to favorite</md-button>

  <md-list>
    <md-subheader>Favorite States</md-subheader>
    <md-list-item ng-repeat="state in vm.states | orderBy">
      <span class="md-body-1">{{ state }}</span>
    </md-list-item>
  </md-list>
</form>


<md-button form="mainFrm" class="md-raised md-primary" type="submit">Save Main</md-button>

【讨论】：

【解决方案2】：

根据W3C HTML5 Documentation，嵌套表单无效/不允许。

【讨论】：