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

NOTE: I used angular-material design

请您参考如下方法:

虽然 HTML5 中不允许嵌套表单,但您可以在保持相同布局的同时分离表单。在此处查看代码笔以获取工作示例: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> 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!