AngularJS/HTML5 Nested Form validation

Question

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 doesnt work. the ng-submit="" of that form wont trigger and there is no validation prompting when input is empty.

Here is the working DEMO

NOTE: I used angular-material design

What do you mean with "the submit button of stateFrm wont work properly"? What is the expected outcome vs actual outcome? — Fissio, Jan 26 '17 at 09:27
@Fissio i mean the button of stateFrm wont trigger the `vm.addItem(state)` the expected one is that there will be a validation if empty else add the item in the list — Shift 'n Tab, Jan 26 '17 at 09:30
@ShiftN'Tab Nested forms aren't allowed in HTML5. See http://stackoverflow.com/questions/26536861/are-nested-forms-valid-in-html5 — Fissio, Jan 26 '17 at 09:33
@ShiftN'Tab, added a working example without nested forms, with the same layout — Fissio, Jan 26 '17 at 09:39

score 3 · Accepted Answer · answered Jan 26 '17 at 09:37

While nested forms aren't allowed in HTML5, you can separate the forms while keeping the same layout. Check the codepen here for a working example: 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>

score 1 · Answer 2 · answered Jan 26 '17 at 09:38

1

As per W3C HTML5 Documentation, nested forms are not valid/allowed.

answered Jan 26 '17 at 09:38

Santanu Biswas

4,699
2
22
21

AngularJS/HTML5 Nested Form validation

2 Answers2