我是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 =&#34;&#34;当输入为空时,该形式不会触发,并且没有验证提示。
这是工作DEMO
注意:我使用了角度材料设计
答案 0 :(得分:3)
虽然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>
答案 1 :(得分:1)
根据W3C HTML5 Documentation,嵌套表单无效/允许。