AngularJS/HTML5 Geschachtelte Form Validierung

Question

Ich bin neu in AngularJS und ich habe Probleme mit HTML5 verschachtelte Form Validierung richtig.

Ich habe 2 Formen ist mainFrm(Mutterform) und das andere ist stateFrm(ein Kind Form). Ich habe Probleme, jedes Formular in seinem eigenen Umfang zu validieren.

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

Wenn die Taste der Arbeit stateFrm tut einreichen dies zu tun. Das ng-submit = "" dieses Formulars wird nicht ausgelöst und es gibt keine Bestätigungsaufforderung, wenn die Eingabe leer ist.

Hier ist der Arbeits DEMO

HINWEIS: Ich benutzen Winkel-Material-Design

Answer 1

Während verschachtelte Formen in HTML5 nicht erlaubt sind, können Sie die Formulare trennen, während das gleiche Layout halten . Schauen Sie sich die codepen hier für ein funktionierendes Beispiel: 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> 

Answer 2

Wie pro W3C HTML5 Documentation, verschachtelte Formen sind nicht gültig/erlaubt.