0

So I have form with one input text field (ng-required="true") and a group of radio buttons (each has ng-model="House.window" ng-required="!House.window"). I've noticed that if I check a radio button first and then type in the field, the form doesn't validate. But if I type in the field and Then check a radio button, then it validates.

But even if I do follow the steps in the right order and the form validates, once the submit function fires it's made to reset the fields. So the text field is set to an empty string and the radio button is set to false. But if I then start by typing in the name, the form immediately validates even though I haven't selected a radio button yet.

Why does these things happen and how can I fix them?

EDIT: I tried to make an example similar to what I'm doing, but unfortunately I keep getting an angular module error on plunkr that I can't figure out. This is NOT an error I get in my final code. If someone can solve this by all means it would help the topic to move forward: plnkr.co/edit/vW6atqN0oYKz7AgUa108

Improve this question
3
  • Can you post a plunker example with your code? Commented Jul 11, 2018 at 21:59
  • It’s really hard to answer a question about a bug in code when the question doesn’t include any of the buggy code. In order to help fix the problem, answerers are going to have to see what the code is. Commented Jul 11, 2018 at 22:49
  • 1
    The error in your plunker is due to using ng-app="myApp" - needs a capital M. Commented Jul 12, 2018 at 22:23

2 Answers 2

Reset to default
1

You need to initialise $scope.Person in your controller. For some reason I don't know off-hand, selecting a radio button does not automatically initialise the Person object, while entering something into the text field does (explaining the behaviour you observe with doing things in a different order).

var MyApp = angular.module('MyApp', []);

MyApp.controller('MyAppController', [ '$scope', function($scope) {
    $scope.colors = [ 'Red', 'Blue', 'Yellow', 'Green'];
    $scope.Person = {};
    
    $scope.addPerson = function() {
        var person = {
			      'name' : $scope.Person.name,
			      'favoriteColor' : $scope.Person.favoriteColor
		    };
        
        $scope.Person = {};
    };
}]);
<!DOCTYPE html>
<html>

  <head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  </head>

  <body ng-app="MyApp" ng-controller="MyAppController">
    <form name="newPerson" ng-submit="addPerson()">
        <div>
            <input type="text" name="name" ng-model="Person.name" ng-required="true" placeholder="Name" />
        </div>
        
        <div>
            <ul>
                <li ng-repeat="color in colors">
                    <input type="radio" value="{{color}}" name="favoriteColor" ng-model="Person.favoriteColor" ng-required="!Person.favoriteColor"/>{{color}}
                </li>
            </ul>
        </div>
        
        <div>
            <button type="submit" class="btn btn-light btn-md" ng-disabled="newPerson.$invalid" role="button">
                Add person
            </button>
        </div>
    </form>
  </body>

</html>

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

Comments

0

While @john-rix answer didn't solve my problem it did help me figure out the solution. The way I was trying to reset the radio inputs was by setting the model for them to false but that seemed to still count as a valid value so the input would still be set to ng-valid. So instead of setting it to false I set it to null and that made it set to nd-invalid. Hope that helps someone else who gets stuck.

Improve this answer

3 Comments

I have to admit I'm puzzled as to how my solution did not achieve the same result. Did you initialise $scope.Person within the controller itself AND in $scope.addPerson? The code snippet above does work.
Yes, that's what I did, but it didn't solve the problem.It would still be valid when it wasn't. But like I said, assigning null to it did the trick. Presumably, false counts as a value and counts as a valid value (no, I didn't have it in quotations so it wasn't a string).
Well there must be some other complicating factor in your own code, since the snippet above demonstrably works fine and solves the question you posted. If you could accept the answer on that basis I would appreciate it.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.