Form does not validate fields after dynamically adding "required" attribute

[Nicolas Laplante]

Let's say my form has 2 radio buttons, "YES" and "NO".

I have 2 text fields which are hidden by default, unless I click on the "NO" radio.

I've made a directive which adds the 'required="required"' attribute to the element when an expression evaluates to true:

myModule.directive("requiredIf", function () {
        return {
            restrict: "A",
            link: function (scope, element, attr, ctrl) {
                scope.$watch(attr.requiredIf, function (value) {
                    if (value === true) {
                        element.attr("required", "required");                       
                    }
                    else {
                        element.removeAttr("required");
                    }
                });
            }
        };
    });

The way I've put my fields is as follow:

<input type="radio" name="choice" value="Y" ng-model="choice" required>
<input type="radio" name="choice" value="N" ng-model="choice" required>

<input class="input-small" type="number" name="price" ng-model="price" required-if="choice == 'N'">

Using Firebug console, I can confirm that the "required='required'" attribute is added to my text field. However, if I leave the field blank, the $invalid property in the form controller stays false, as if the controller didn't know that this field is now required. Is there a way to notify the form controller that validation rules changed on one or more fields within it after initialization?

[edgardo....@gmail.com]

Why you dont use the ng-show or ng-hide and in the controller you can put the $scope.choice = true or false and when you checked a radio button this value change

[Pawel Kozlowski]

Nicolas,

You don't need to write require-if, it already exists in the form of
ngRequired. It is not documented(!) in angular.js docs so this is not
obvious so find it... But there is already a bug report opened for
missing docs: https://github.com/angular/angular.js/issues/1202

Anyway, you can write:

<input class="input-small" type="number" name="price"

ng-model="price"> ng-required="choice == 'N'">

> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

[Pawel Kozlowski]

So, as I've mentioned in the post sent just before (sorry, sent too
fast by accident), there is already ngRequired.
Here you can see it in action:
http://jsfiddle.net/pkozlowski_opensource/t6PGj/8/

Hope this helps,
Pawel

On Wed, Aug 8, 2012 at 5:41 PM, Nicolas Laplante
<nicolas....@gmail.com> wrote: