AngularJS Form validating even though input is invalid

Question

I have a form where there are some required inputs that are not within the form tag. The form is validating even though these inputs are not valid.

How can I fix this without moving all inputs inside the form tag?

Specifically I need to have the form be invalid when any inputs associated with the form are invalid. Not just those contained within the element.(i.e. any input with it's form attribute pointing to the form)

example:

http://jsfiddle.net/v6QkB/

<div class="radio-group">
  <input type="radio" form="testForm" name="test2" value="a" ng-model="formData.test2" ng-required="true">
  <input type="radio" form="testForm" name="test2" value="b" ng-model="formData.test2" ng-required="true">
</div>
<form name="testForm">
  <div class="radio-group">
    <input type="radio" name="test1" value="a" ng-model="formData.test1" ng-required="true">
    <input type="radio" name="test1" value="b" ng-model="formData.test1" ng-required="true">
  </div>
  <input type="submit" value="submit" ng-disabled="testForm.$invalid">
</form>

Answer 1

You can use the ngForm directive to wrap all elements (outer inputs and form).

According to the docs ngForm is a "nestable alias of form directive. [...] It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined."

Furthermore, "the purpose of ngForm is to group controls, but not to be a replacement for the <form> tag with all of its capabilities (e.g. posting to the server, ...)".

<div ng-form="outerForm">
    <div class="radio-group">
        ...
    </div>
    <form name="testForm">
        <div class="radio-group">
            ...
        </div>
        <input type="submit" value="submit" ng-disabled="outerForm.$invalid" />
    </form>
</div>