AngularJS/HTML5 Вложенная форма проверки

Question

Im new для 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

ПРИМЕЧАНИЕ: Я использовал угловой материал конструкции

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

Answer 2

Согласно W3C HTML5 Documentation, вложенные формы не являются действительными/разрешены.