Angular Group validation of fieldsets

Question

AngularJS validation works fine with ng-required, but I wanna see if all form elements inside my fieldset are valid.

<form>
    <fieldset>  
        <legend>
            Part one
            <img src="/correct.png" ng-show="part_one_valid">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>

    <fieldset>
        <legend>
            Part two
            <img src="/correct.png" ng-show="part_two_valid">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>
</form>

That's the structure of the HTML simplified. What I wanna do, is show the image when the input fields inside the fieldset are valid.

Solution 1

Take advantage of ng-form directive, where multiple forms can be nested inside each other using it. I'd suggest you to use use ng-form directive to make fieldset to act like a form and give some specific name to it, to enable the form validation on your form fields you need to use name attribute on both form as well as on the elements of the form.

Markup

<form name="myForm">
    <fieldset ng-form="part_one">  
        <legend>
            Part one
            <img src="/correct.png" ng-show="part_one.$valid">
        </legend>
        <input type="text" name="name" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" name="foobar" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>

    <fieldset ng-form="part_two">
        <legend>
            Part two
            <img src="/correct.png" ng-show="part_two.$valid">
        </legend>
        <input name="name" type="text" ng-required=1 ng-model="name" placeholder="name">
        <input name="foobar" type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>
</form>

Solution 2

You need to use ng-form='formX' directive on each fieldset (since you cannot put one form tag inside another). Then just use <img src='myimg.jpg' ng-show='!!formX.$errors.required' /> inside each fieldset

You can create directive to encapsulate that.

  <form>
    <fieldset ng-form='form1'>  
        <legend>
            Part one
            <img src="/correct.png" ng-show="!!form1.$errors.required">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>

    <fieldset ng-form='form2'>
        <legend>
            Part two
            <img src="/correct.png" ng-show="!!form2.$errors.required">
        </legend>
        <input type="text" ng-required=1 ng-model="name" placeholder="name">
        <input type="text" ng-required=1 ng-model="foobar" placeholder="email">
    </fieldset>
</form>