AngularJS/HTML5ネストされたフォームの検証

Question

AngularJSには新規ですが、HTML5のネストされたフォームの検証を正しく使用すると問題が発生します。

私は2つの形態1を持っているがmainFrm（親フォーム）であり、他はstateFrm（子フォーム）です。私は独自のスコープで各フォームの検証に問題があります。この際stateFrm doesntの仕事の送信ボタンを

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

。そのフォームのng-submit = ""がトリガされず、入力が空のときに確認を促す確認はありません。ここで

作業​​

NOTEです：ネストされたフォームはHTML5で許可されていないものの、私は、角-材料設計

Answer 1

を使用したのと同じレイアウトを維持しながら、あなたはフォームを分離することができます。作業例はこちらcodepenを確認してください：http://codepen.io/anon/pen/YNrGrpW3C HTML5 Documentation 1として

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

Answer 2

、ネストされたフォームは許可/有効ではありません。