Just starting out with AngularJS and experiencing issues with HTML5 nested form validation.
I currently have 2 forms; mainFrm (parent form) and stateFrm (a child form). I am struggling to validate each form within 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 won't add an item if input-text is empty-->
<!-- prompts HTML5 validation-->
<button form="stateFrm" type="submit">Add state to favorites</button>
<!-- and a list of favorite states -->
</form>
<!-- (Will only validate the text-input of mainForm if empty) -->
<button type="submit">Save</button>
</form>
The submit button of stateFrm is not working. The ng-submit="" of that form will not trigger and there is no validation prompt when the input is empty.
Check out the functional DEMO
NOTE: angular-material design was used in this example