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>

You need to elaborate more on your constraints. What is and isn't an option ? — gkalpak
– gkalpak, Commented May 14, 2014 at 20:01
The only constraint is that I cannot change the layout of the page. Which means the radio inputs must remain outside of the form element. — clifdensprit
– clifdensprit, Commented May 14, 2014 at 20:35
Do you know about ng-form ? Would it be possible to wrap it all (outer inputs and form) inside an ngForm ? — gkalpak
– gkalpak, Commented May 14, 2014 at 20:41
Ah, ok, I had assumed ngForm had to be applied to a form element. I now see that that is incorrect. This should fix the issue by applying it to the page wrapper. Thanks — clifdensprit
– clifdensprit, Commented May 14, 2014 at 20:57
If you add that as an answer I'll go ahead and mark it correct. — clifdensprit
– clifdensprit, Commented May 14, 2014 at 20:58

gkalpak · Accepted Answer · 2014-05-14 21:06:33Z

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>

Collectives™ on Stack Overflow

AngularJS Form validating even though input is invalid

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related