Angularjs radio button group, form valid without any selection

Question

On an angularJS application I have a <form> with a group of radio buttons, I want to force the user to select an option before he validates the form.

Here a simplify version of my HTML code :

  <form name="myForm">
    <label ng-repeat="option in options">
      {{option.name}}
      <input type="radio" name="animalOptions" value="option.id" required>
    </label>
    <button type="submit" ng-disabled="!myForm.$valid">
      SUBMIT
    </button>
    <h1>
    {{myForm.$valid}}
    </h1>
  </form>

I reproduced my issue in this example :

JSfiddle

Why does it prints true instead of false ?

Bill P · Accepted Answer · 2019-06-06 10:32:29Z

1

You need to set ng-model to keep the selected value, e.g. $scope.selected (required needs ng-model to work). Also a function is needed to set the model on every click. Validation can be done like this:

 <label ng-repeat="option in options">
    {{option.name}}
    <input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
  </label>

ng-required="!selected" ensures that user has selected an option Check this example: fiddle example

edited Jun 6, 2019 at 10:32

answered Jun 6, 2019 at 10:24

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

Comments

rahim.nagori · Accepted Answer · 2019-06-06 12:38:07Z

0

You need ng-model to set validity of your form input(s). And use

required

like this in Angular way :

ng-required="true"

Something like this :

<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
    <input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
    <input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
    <button type="submit" >Submit</button>
</form>

answered Jun 6, 2019 at 12:38

rahim.nagori

6668 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angularjs radio button group, form valid without any selection

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related