Question

所以我有一个带有一个输入文本字段（ng-required =“ true”）和一组单选按钮的表单（每个都有ng-model =“ House.window” ng-required =“！House.window”）。我注意到，如果我先检查一个单选按钮，然后在字段中键入，该表单将无法验证。但是，如果我在该字段中输入“然后检查单选按钮”，则它会验证。

但是，即使我确实按照正确的顺序执行了步骤，并且表单通过了验证，但一旦提交函数触发，就会重置字段。因此，文本字段设置为空字符串，单选按钮设置为false。但是，如果我先输入名称，即使我尚未选择单选按钮，该表单也会立即生效。

这些事情为什么会发生，我该如何解决？

编辑：我试图举一个与我正在做的事情类似的示例，但是不幸的是，我不断在plunkr上收到一个我无法弄清的角度模块错误。这不是我在最终代码中遇到的错误。如果有人可以解决所有问题，它将有助于该主题的发展：plnkr.co/edit/vW6atqN0oYKz7AgUa108

Answer 1

您需要在控制器中初始化$ scope.Person。出于某种原因，我暂时不会知道，选择单选按钮并不会自动初始化Person对象，而在文本字段中输入内容却会自动初始化（解释以不同顺序执行操作时观察到的行为）。

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>

Answer 2

虽然@ john-rix答案不能解决我的问题，但确实可以帮助我找出解决方案。我试图重设无线电输入的方法是将无线电输入的模型设置为false，但这似乎仍算作有效值，因此输入仍将设置为ng-valid。因此，与其将其设置为false，而是将其设置为null，然后将其设置为nd-invalid。希望可以帮助陷入困境的其他人。

AngularJS中的单选按钮未将表单设置为有效

2 个答案: