Angularjs, checking if radio buttons in form have been selected

Question

I'm starting with AngularJS, and I'm building a multi-step form where user has to fill different pages. When finished a page, he's allowed to press a next button and fill the following page.

For the first page, I've built in the HMTL a form (named pageOneForm), with different text input fields, marked as required, and in the relative controller I'm doing this watch:

$scope.$watch('pageOneForm.$valid', function(validity) {
      ModelData.actualPageCompleted = validity;
})

And it works like a charme. My model (ModelData) is updated.

I was trying to apply the same logic to the following part of the app, the second page. Instead of input text, the user has to select two options from 2 different radio buttons groups. So I built in the html a list of buttons via ng-repeat :

<div ng-Controller="PageTwo" ng-show='data.actualPage == 2'>
    <form  name="pageTwoForm">
        <h3>General Information > Knowledge About </h3>
        <div>
        <b>User</b>
        <div ng-repeat="option in userOptions">
            <input type="radio" name="userGroups" ng-model="data.knowledgeAboutUser" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
        </div>


        <div ng-repeat="option in targetGroupUserOptions">
            <input type="radio" name = "targetUserGroup" ng-model="data.knowledgeAboutTargetGroup" ng-value="option.id" id="{{option.id}}" required>{{option.text}}
        </div>
    </div>
</form>

and I've implemented the same code as above in its controller:

$scope.$watch('pageTwoForm.$valid', function(validity) {
      ModelData.actualPageCompleted = validity;
})

but apparently it doesn't work, and in my model actualPageCompleted is always true... What am I doing wrong? Thanks

did you try to "watch" the variable, so that when it changes, you know you got a new value? — holographix
– holographix, Commented Apr 17, 2014 at 11:59

Community · Accepted Answer · 2017-05-23 12:11:12Z

1

I did my best to create a controller with some dummy data to get a fiddle working with your example code. Here is the fiddle You need to force the $digest cycle to update your form's validity state on ng-click for the radio buttons (see this SO post for more details), which is why the method

    $scope.forceDigest = function(){
        setTimeout(function(){ $rootScope.$$phase || $rootScope.$apply(); });
    };

is necessary. Alternatively, you can get rid of the method call and uncomment the html code

    <h3 ng-show="false">{{data.knowledgeAboutTargetGroup}}</h3>
    <h3 ng-show="false">{{data.knowledgeAboutUser}}</h3>

in the fiddle to force the form object to update as well.

And I would make sure that ModelData.actualPageCompleted is not retaining its true value from when pageOneForm.$valid became true and it was set.

I hope that this helps!

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Apr 16, 2014 at 21:38

jbll

1,2161 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs, checking if radio buttons in form have been selected

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related