AngularJS switches are not marked $ dirty until the last button is selected

Question

I created this simple example: http://jsfiddle.net/5Bh59/ .

If you switch between AngularJS 1.2.1 and 1.1.1, you will see that the switches do not work properly in any version. If you are viewing the $dirty switch box, 1) for version 1.1.1, it will be installed only when the first button is pressed and 2) for version 1.2.1, it will be installed only when the last button is clicked.

I read this answer: The AngularJS Radio group did not set $ dirty on the field , but I really don't understand the answer. Not only that, but the example of a violinist demonstrates the same behavior.

So this is a bug in AngularJS and how can I get around it?

Answer 1

You either need to specify a different name for each switch, or you need to flip each switch in an ng form (each of which has a different name). If you use two inputs with the same name in the same form, only the latter will be bound to the FormController property. If you use different names, each input will have its own property on the FormController.

An example with different names for each switch: http://jsfiddle.net/BEU3V/

 <form name="form" novalidate> <input type="radio" name="myRadio1" ng-model="myRadio" ng-click="" value="Rejected" required>Rejected<br /> <input type="radio" name="myRadio2" ng-model="myRadio" ng-click="" value="Approved" required>Approved<br /> Form $dirty: {{form.$dirty}}<br /> Field1 $dirty: {{form.myRadio1.$dirty}}<br /> Field1 $dirty: {{form.myRadio2.$dirty}}<br /> Value: {{myRadio}} </form> 

An example of wrapping using an ng form: http://jsfiddle.net/39Rrm/1/

 <form name="form" novalidate> <ng-form name="form1"> <input type="radio" name="myRadio" ng-model="myRadio" ng-click="" value="Rejected" required>Rejected<br /> </ng-form> <ng-form name="form2"> <input type="radio" name="myRadio" ng-model="myRadio" ng-click="" value="Approved" required>Approved<br /> </ng-form> Form $dirty: {{form.$dirty}}<br /> Field1 $dirty: {{form.form1.myRadio.$dirty}}<br /> Field2 $dirty: {{form.form2.myRadio.$dirty}}<br /> Value: {{myRadio}} </form> 

If you need one check for a radio group, you can wrap all the radio buttons in your own ng form and call it something like name = "radioGroup".

http://jsfiddle.net/6VVBL/

 <form name="form" novalidate> <ng-form name="radioGroup"> <input type="radio" name="myRadio1" ng-model="myRadio" ng-click="" value="Rejected" required>Rejected<br /> <input type="radio" name="myRadio2" ng-model="myRadio" ng-click="" value="Approved" required>Approved<br /> </ng-form> Form $dirty: {{form.$dirty}}<br /> Group $valid: {{form.radioGroup.$valid}}<br /> Group $dirty: {{form.radioGroup.$dirty}}<br /> Value: {{myRadio}} </form> 

Answer 2

This answer is related, but perhaps not entirely applicable, but after discovering and reading this element, I found it valuable and I don’t have enough points to just comment on the answer (which, I thought, would be a more appropriate way to answer).

My problem was that I wanted to show the required error (using ng messages), but when you added a tab to / from the $ touch switch group, you didn’t return unless you moved the tab back from the next user interface element back to the last switch groups. (When my form makes the radio buttons not installed - I want the user to make a choice and not rely on the user accepting the default value.)

Here is my code:

 <div class="form-group" ng-class="{'has-error': pet.genderId.$invalid && pet.genderId.$touched}"> <label class="control-label"> What is your pet gender? <span ng-messages="pet.genderId.$error" ng-show="pet.genderId.$invalid && pet.genderId.$touched"> <span ng-message="required">(required)</span> </span> </label> <div> <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="1" required ng-blur="pet.genderId.$setTouched();" />Male</label> <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="2" required ng-blur="pet.genderId.$setTouched();" />Female</label> <label class="radio-inline"><input type="radio" ng-model="genderId" name="genderId" value="3" required ng-blur="pet.genderId.$setTouched();" />Not sure</label> </div> </div> 

The "magic" added the ng-blur attribute to set the "touched" itself, even if only the first switch was missed.

You can use a similar tactic for $ dirty by calling $ setDirty () on the ng-changed attribute.