Im new to AngularJS and i have problem using HTML5 nested form validation properly.
I have 2 forms one is mainFrm (parent form) and the other is stateFrm (a child form). I have problem validating each form on its own scope.
<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>
When doing this the submit button of stateFrm wont work properly.
Here is the working DEMO
NOTE: I used angular-material design
