问表单在AngularJS中未设置为具有单选按钮的有效
EN

Stack Overflow用户

提问于 2018-07-11 21:56:31

回答 2查看 117关注 0票数 0

所以我的表单包含一个输入文本字段(ng-required="true")和一组单选按钮(每个按钮都有ng-model="House.window“ng-required="!House.window")。我注意到，如果我先选中一个单选按钮，然后在字段中键入，表单就不会生效。但如果我在字段中键入，然后选中一个单选按钮，它就会验证。

但是，即使我按照正确的顺序执行了这些步骤，并且表单进行了验证，一旦触发了提交函数，它也会被用来重置字段。因此，文本字段被设置为空字符串，单选按钮被设置为false。但是如果我从输入名称开始，即使我还没有选择单选按钮，表单也会立即生效。

为什么会发生这些事情，我如何才能修复它们？

编辑:我试着做一个与我正在做的类似的例子，但不幸的是，我一直在plunkr上得到一个我不能解决的角度模块错误。这不是我在最终代码中得到的错误。如果有人可以通过各种方式解决这个问题，这将有助于主题的前进: plnkr.co/edit/vW6atqN0oYKz7AgUa108

javascript

html

angularjs

腾讯云域名特惠，新用户首年1元起

腾讯云域名专场特惠：个人新用户.cn仅8.8元/年，企业新用户.com仅1.06元/年...

回答 2

Stack Overflow用户

发布于 2018-07-12 22:22:20

你需要在你的控制器中初始化$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>

票数 1

Stack Overflow用户

发布于 2018-07-12 23:33:24

虽然@john-rix answer没有解决我的问题，但它确实帮助我找到了解决方案。我试图重置无线电输入的方法是将它们的模型设置为false，但这似乎仍然算作有效值，因此输入仍将设置为ng-valid。因此，我没有将其设置为false，而是将其设置为null，从而将其设置为nd-invalid。希望这能帮助其他被卡住的人。